Web Development·12,133 discussions

Pre-Selecting Tabbed Menu Items on PHP Page

Tags: Web development

I’m a UX designer who has to do some web development on a vendor’s platform. The vendor’s system is php and frequently uses iframes to place content, so I spend a lot of time trying to find ‘creative’ solutions to pages I have to build myself.

I’m creating a basic css tab menu. I need to be able to link users to this page with specific tabs open for different use cases. Our vendor says they can’t help us with this “because it’s a php page”. I feel like this should be possible, but I don’t have deep dev knowledge.

Stripped down example: https://studiotoolkit.dmplocal.com/sites/4054/tabsforhelp.html

I appreciate any suggestions. Thank you!

Topic

[kees_b]

Reply To: Pre-Selecting Tabbed Menu Items on PHP Page

In reply to Pre-Selecting Tabbed Menu Items on PHP Page

If no luck here or in other forums, consider hiring somebody to help you or even do it for you. Or suggest the vendor hires someone with more knowledge then you currently have for this particular task.

• This reply was modified 1 year, 11 months ago by kees_b.
• This reply was modified 1 year, 11 months ago by kees_b.

Here is the example code

In reply to Pre-Selecting Tabbed Menu Items on PHP Page

If you want to pre-select a tabbed menu item on a PHP page, you can do this using a combination of HTML and PHP code.

Here’s an example:

Let’s say you have a tabbed menu with three items: “Home”, “About Us”, and “Contact Us”. By default, the “Home” tab is selected. If you want to pre-select the “Contact Us” tab, you can add the following code to your PHP page:

php

Copy code
<ul class=”nav nav-tabs”>
<li <?php if($_GET[‘tab’] != ‘about’ && $_GET[‘tab’] != ‘contact’) {echo ‘class=”active”‘;} ?>>Home
<li <?php if($_GET[‘tab’] == ‘about’) {echo ‘class=”active”‘;} ?>>About Us
<li <?php if($_GET[‘tab’] == ‘contact’) {echo ‘class=”active”‘;} ?>>Contact Us

In this code, we’re using the PHP $_GET superglobal to check whether the tab parameter is set in the URL. If the tab parameter is set to “about”, we add the active class to the “About Us” tab. If the tab parameter is set to “contact”, we add the active class to the “Contact Us” tab. If the tab parameter is not set, we assume that the user wants to see the “Home” tab and add the active class to it.

You can change the default tab by changing the logic in the if statement. For example, if you want to pre-select the “About Us” tab by default, you can change the if statement for the “Home” tab to if($_GET[‘tab’] != ‘about’ && $_GET[‘tab’] != ‘contact’).

I hope this helps! Let me know if you have any further questions.

[Author]

Replies