Selecting different CSS ID's.. JavaScript?

[Zaphan58]

Basically I've created a tabbed navigation bar using XHTML and CSS. When the page is on the tab selected I want to use a different CSS ID for the tab so it can have another state.

What's the best way to do this? I've done it with CSS alone before but that way was a little long winded. I believe some JavaScript can do it by looking at the URL and matching it to the tab name?

 

[rickh]

its easy with jquery

the 2 variables you're interested in are:

window.location
AND
$(element).attr('href');


on page load, you could loop through all of your tabs and check if the 1st variable matches the 2nd

something like this (not tested)

$('.tabClassNameHere').each(function(){

tab_href = $(this).children('a').attr('href');

if(   window.location.toString().indexOf(  tab_href  )  !=-1   ){
$(this).addClass('selected');
}

});

post your code for more help

 

[Muel]

Personally I'd just use some PHP to insert the id name if the name of the page is the same as the name in the link.

So you'd have, I assume:

<a href="page.php">Page</a>

As the markup for each button, so all you'd need to do is insert a bit of php to say, "when file name == href, add id", thus giving:

<a href="page.php" id="selected">Page</a>

Not sure on the PHP for it yet, but I'll have a play tonight and post it up when I can. (If I figure it out).

 

[rickh]

I prefer to keep such things client side.
Writing UI functionality in server side languages prevents code re usability.

The Javascript (jquery) method also allows cleaner code since the scripting doesn't have to be inline, where the php will be embedded in the html code.

Also, if the tabs aren't generated dynamically, the php logic will have to be defined on a per link basis, where the javascript method would allow iterative traversal through an undefined set of html tags.

If the tabs are generated dynamically, then you can just add the logic into the loop - in this case, the php method becomes slightly more attractive.


One small note regarding the code above, it's bad practice to change document ID's for styling, that's what classes are for.

 

[PaulM]

I always add the selected class with jQuery:

$(function () {
            var path = location.pathname.substring(1) + document.location.search;
            if (path) { $('#tabContainer a[href$="' + path + '"]').addClass('selected'); }
        });

Edit: I should probably refresh the page before posting Must have opened this thread last night.

 

[Muel]

I prefer to keep such things client side.
Writing UI functionality in server side languages prevents code re usability.

The Javascript (jquery) method also allows cleaner code since the scripting doesn't have to be inline, where the php will be embedded in the html code.

Also, if the tabs aren't generated dynamically, the php logic will have to be defined on a per link basis, where the javascript method would allow iterative traversal through an undefined set of html tags.

If the tabs are generated dynamically, then you can just add the logic into the loop - in this case, the php method becomes slightly more attractive.


One small note regarding the code above, it's bad practice to change document ID's for styling, that's what classes are for.

But surely this is about generating markup? So a server side language would be ideal?

I know this is a very old excuse but bare with me, JS can be turned off, but more than that, it isn't present in a lot of mobile browsers, and when it is it takes far longer to process than on a computer. If you ask me the use of Javascript and jQuery should be minimized now more than ever.

By solving this with php, you're using less bandwidth, less client-side processing time and more users will be able to get the enhanced experience.

I'm not a JS/jQuery hater by the way, I use them regularly, but using it in this situation if you ask me is not the best solution.

 

[rickh]

But surely this is about generating markup? So a server side language would be ideal?

I know this is a very old excuse but bare with me, JS can be turned off, but more than that, it isn't present in a lot of mobile browsers, and when it is it takes far longer to process than on a computer. If you ask me the use of Javascript and jQuery should be minimized now more than ever.

By solving this with php, you're using less bandwidth, less client-side processing time and more users will be able to get the enhanced experience.

I'm not a JS/jQuery hater by the way, I use them regularly, but using it in this situation if you ask me is not the best solution.

That's a debate that has no absolute correct answer, the decision is very much up to the developer and his skill.

However, in this case, the navigation bar is not generated by php - if it were then I would probably have assigned the selected state server side because the href wouldn't have to be given to php manually for each link.

My opinion in reply your arguments:

1. It's about selecting an element and changing its style. It's only about generating markup if you make it that way.

2. Browsers have javascript enabled by default, if users choose to disable it then they realise that they are removing their browsers ability to interact with html and thus downgrading their web experience.

3. Mobile browser support for javascript is actually very similar to desktop support, if you had said that 5 years a go I'd have agreed with you though.

4. Adding a class to an element is not computationally intensive, and it will not add any significant latency to the browsing experience. As browsers evolve, javascript speed improvements follow.

5. Forcing php to parse an otherwise plain html document for just 1 UI element will add far more latency to the process than downloading and running 4 lines of javascript.

Anyway, since the OP has requested help, the easier option (javascript) is probably the best one - otherwise OP would have worked out the more complex option by now

 

[Zaphan58]

Thanks for the replies guys. I'm going to have a bit of a fiddle with jQuery now

 

[Dj_Jestar]

That's a debate that has no absolute correct answer, the decision is very much up to the developer and his skill.

However, in this case, the navigation bar is not generated by php - if it were then I would probably have assigned the selected state server side because the href wouldn't have to be given to php manually for each link.

My opinion in reply your arguments:

1. It's about selecting an element and changing its style. It's only about generating markup if you make it that way.

2. Browsers have javascript enabled by default, if users choose to disable it then they realise that they are removing their browsers ability to interact with html and thus downgrading their web experience.

3. Mobile browser support for javascript is actually very similar to desktop support, if you had said that 5 years a go I'd have agreed with you though.

4. Adding a class to an element is not computationally intensive, and it will not add any significant latency to the browsing experience. As browsers evolve, javascript speed improvements follow.

5. Forcing php to parse an otherwise plain html document for just 1 UI element will add far more latency to the process than downloading and running 4 lines of javascript.

Anyway, since the OP has requested help, the easier option (javascript) is probably the best one - otherwise OP would have worked out the more complex option by now

The op is talking about navigation... that's very much a server side thing imo. Clicking on the link will change the page anyway, so why use JS to change class/id when the page is refreshing anyway?

I'm also very, very much of the opinion that you should get something working with server side only, then enhance it with JS - do not go JS first!

 

[LazyManc]

The op is talking about navigation... that's very much a server side thing imo. Clicking on the link will change the page anyway, so why use JS to change class/id when the page is refreshing anyway?

I'm also very, very much of the opinion that you should get something working with server side only, then enhance it with JS - do not go JS first!

This.

Specifying which nav item is active is not just UI window dressing, it's a semantic part of the markup which can be useful to whatever is parsing the html, be it your browser, a screen reader, or some kind of automated scraper, any of which might not actually process javascript.