Administrators Nathan Posted February 18, 2015 Administrators Posted February 18, 2015 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/ Quote
Administrators Nathan Posted February 18, 2015 Author Administrators Posted February 18, 2015 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? Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.