Creating hover and current page states with sibling elements

Question

I have animated nav buttons and can actually set everything with css with the exception of one element. An arrow. Here's the actual live page.

http://sclarkstudio.com/testing/mm/index.htm

I'm trying to make the arrow visible and static on the current page. I have a hover script that animates the arrow when the class is set to .arrow and it's static and visible when the class is set to .currenta.

<body id="@@id@@"> <!-- in this case "home" -->

<nav class="sidebar1">
<ul class="navbox">
    <li class="navBtn">
        <div class="slider on"></div>
        <a id="BtnText" class="navButton home"href="index.htm">Home</a>
        <div id="arrow" class="arrow"></div>
    </li>
    <li class="navBtn">
        <div class="slider on"></div>
        <a id="BtnText" class="navButton news"href="news.htm">News</a>
        <div id="arrow" class="arrow"></div>

and so on...



 </ul>
</nav>

The script that I'm trying to write just needs to change the class of the arrow div to ".currenta"

var bodyID = $("body").attr("id");
var url = window.location;

$(function() {

$('nav ul li a #BtnText').each(function(){
var myHref = $(this).attr('href');
if( url == myHref) {
    $(this).closest('div','#arrow').css('currenta');
} 
});
});

I have been pulling my hair out trying to figure this one out and not the best coder.

wirey00 · Answer 1 · 2012-08-03T20:28:02.920

First : ID's should be unique. It will only grab the first element it finds with that ID

Second : To add a class use addClass()

Third : window.location will never == your href so the code will never run. You want to check if it contains your href by using indexOf

Fourth: You can just grab the elements with their class name.

$('.arrow').each(function(){
     var $this = $(this);
     if(window.location.indexOf($this.siblings('a.navButton').attr('href')) > -1){  //
         $this.removeClass('arrow').addClass('currenta');  
         // I think you wanted to remove the arrow class.. if not just remove it
     }
});

http://jsfiddle.net/9x9uF/

The Alpha · Answer 2 · 2012-08-03T20:31:13.680

First of all you have duplicate ids in your page (BtnText and arrow) exists more than once, change them to class because id must be unique. So your html should be like something like following

<nav class="sidebar1">
    <ul class="navbox">
        <li class="navBtn">
            <div class="slider on"></div>
            <a class="BtnText" class="navButton home" href="index.htm">Home</a>
            <div class="arrow"></div>
        </li>
        <li class="navBtn">
            <div class="slider on"></div>
            <a class="BtnText" class="navButton news" href="news.htm">News</a>
            <div class="arrow"></div>
    </ul>
</nav>

JS

var url = window.location;
$(function() {
    $('nav ul li a.BtnText').each(function(){
        var myHref = $(this).attr('href');
        if(url.match(myHref)) { // use match
            $(this).next('div.arrow')
            .removeClass('arrow').addClass('currenta'); // use removeClass and addClass
        } 
    });
});

DEMO.

Update:

Remember that after removing the class arrow you'll lose all styles associated with this class so you may just use addClass without removing the class arrow using removeClass. So, in that case

$(this).next('div.arrow').removeClass('arrow').addClass('currenta');

should be

$(this).next('div.arrow').addClass('currenta');

AWWWWWSOME! thanks for the feedback. I have a really hard time visualizing the code. I still had to tweak it. I added a var that gave me the page file name. var file = location.pathname.substr(location.pathname.lastIndexOf("/")+1,location.pathname.length); and then added then tweaked the script from Sheikh. $(function() { $('nav ul li a.BtnText').each(function(){ var myHref = $(this).attr('href'); if( file == myHref) { $(this).next('div.arrow').removeClass('arrow').addClass('currenta'); } }); }); Thanks so much. — Scott, Aug 03 '12 at 21:02

Creating hover and current page states with sibling elements

2 Answers2