jQuery Menu Selection

[Nathan]

I have the following.  Depending on which dot in the nav I click on I want it to show as selected.

 

I tried writing my own jQuery to show/hide the different images I'm running into some issues with multiples showing up at the same time.  I'm guessing there is a better method.

 

<div class="dot-nav">

    <a href="#" class="scroll-link" data-id="home" id="home-btn">

        <img src="images/nav-s.png" id="btn-home-s" style="margin-bottom:10px;"/>

        <img src="images/nav-ns.png" id="btn-home-ns" style="margin-bottom:10px;display:none;"/>

    </a><br>

    <a href="#" class="scroll-link" data-id="about" id="about-btn">

        <img src="images/nav-ns.png" id="btn-about-ns" style="margin-bottom:10px;"/>

        <img src="images/nav-s.png" id="btn-about-s" style="margin-bottom:10px;display:none;"/>

    </a><br>

    <a href="#" class="scroll-link" data-id="power" id="power-btn">

        <img src="images/nav-ns.png" id="btn-power-ns" style="margin-bottom:10px;"/>

        <img src="images/nav-s.png" id="btn-power-s" style="margin-bottom:10px;display:none;"/>

    </a><br>

</div>

 

$( "#home-btn" ).click(function() {

                        

                        $( "#btn-home-ns" ).hide(0);

                        $( "#btn-about-s" ).hide(0);

                        $( "#btn-power-s" ).hide(0);

                        $( "#btn-home-s" ).show(0);

                        $( "#btn-about-ns" ).show(0);

                        $( "#btn-power-ns" ).show(0);

  

                    });

$( "#about-btn" ).click(function() {

                        $( "#btn-home-s" ).hide(0);

                        $( "#btn-about-ns" ).hide(0);

                        $( "#btn-power-s" ).hide(0);

                        $( "#btn-home-ns" ).show(0);

                        $( "#btn-about-s" ).show(0);

                        $( "#btn-power-ns" ).show(0);                        

                    });

$( "#power-btn" ).click(function() {

                        $( "#btn-home-s" ).hide(0);

                        $( "#btn-about-s" ).hide(0)

                        $( "#btn-power-ns" ).hide(0);

                        $( "#btn-home-ns" ).show(0);;

                        $( "#btn-about-ns" ).show(0);

                        $( "#btn-power-s" ).show(0);

                    });

 

http://jsfiddle.net/2ov8tw68/1/

[Nathan]

Instead of hiding/showing the image files themselves got this working with:

 

http://jsfiddle.net/2ov8tw68/2/

 

HTML:

<div class="dot-nav">

    <div class="scroll-link sel" data-id="home" id="home-btn">

      

    </div><br>

    <div class="scroll-link nsel" data-id="about" id="about-btn">

 

    </div><br>

    <div class="scroll-link nsel" data-id="power" id="power-btn">

        

    </div><br>

</div>

 

jQuery:

$( "#home-btn" ).click(function() {

    $( "#home-btn" ).removeClass( "nsel" );

    $( "#home-btn" ).addClass( "sel" );

    

    $( "#about-btn" ).removeClass( "sel" );

    $( "#about-btn" ).addClass( "nsel" );

       

    $( "#power-btn" ).removeClass( "sel" );

    $( "#power-btn" ).addClass( "nsel" );

});

 

$( "#about-btn" ).click(function() {

    $( "#home-btn" ).removeClass( "sel" );

    $( "#home-btn" ).addClass( "nsel" );

    

    $( "#about-btn" ).removeClass( "nsel" );

    $( "#about-btn" ).addClass( "sel" );

    

    

    $( "#power-btn" ).removeClass( "sel" );

    $( "#power-btn" ).addClass( "nsel" );

});

 

$( "#power-btn" ).click(function() {

    $( "#home-btn" ).removeClass( "sel" );

    $( "#home-btn" ).addClass( "nsel" );

    

    $( "#about-btn" ).removeClass( "sel" );

    $( "#about-btn" ).addClass( "nsel" );  

    

    $( "#power-btn" ).removeClass( "nsel" );

    $( "#power-btn" ).addClass( "sel" );

});

 

CSS:

.dot-nav

{background:#000;}

 

.sel{

    background:url('images/nav-s.png') no-repeat;

    width:21px;

}

 

.nsel{

    background:url('images/nav-ns.png') no-repeat;

    width:21px;

}

 

#home-btn,#about-btn,#power-btn{

    width:21px;

    height:21px;

}

 

This is fine and works, but is there a better practice or method?