Bernd Matzner wrote:
$('a').each(function(){
if( window.location.href.indexOf( $(this).attr('href') ) >= 0 &&
$(this).attr('href').length > 1 ) {
$(this).css('background-color','#004040')
.css('color','#fff')
.css('font-style', 'italic')
.css('text-decoration', 'none');
}
});
and:
I did a quick test case with the following links:
<a href="index.html">A</a> | <a href="/index.html">B</a> | <a
href="http://localhost/index.html";>C</a> | <a href="index.html?
sdsdg=sdg">D</a>
The Stephan/Karl solution will only highlight link B regardless of
which link I click, whereas my solution highlights A-C when on the
index.html page regardless of the GET vars attached, and it highlights
A-D when D's parameters are matched - that seems right to me.
Good point, Bernd.
Question, though:
What if the current page is index.html?sdsdg=sdg
Would you really want Link A-C to be highlighted?
Most sites I've seen with these GET vars attached have something URLs
like this:
index.html?category=2&product=210
So if I'm on that page, the one for product 210 within category 2, I
don't want to have a link to index.html highlighted. But I think your
solution will highlight it.
I think I'll play around with this some more tonight.
This is fun. :)
By the way, Stephan, if you're modifying all those css properties,
you might want to put them in your stylesheet instead as .foo {color:
#040400; /* etc. */ } and then do .addClass('foo'). Or at least use
the "map" version of .css(), like this:
.css({
'background-color': '#004040',
'color': '#fff',
'font-style': 'italic',
'text-decoration': 'none'
});
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
