Toggle hidden divs by clicking on navigation?

Question

How to switch hidden divs by clicking on nav anchors?

See this script http://jsfiddle.net/rabelais/4rfYB/1/

I wrote this for a very long time, calling each identifier individually, however should there be a shorter way to write this?

$('#link1').click(function() {
    $('#1').show()
    $('#2, #3').hide()
})
$('#link2').click(function() {
    $('#2').show()
    $('#1, #3').hide()
})
    $('#link3').click(function() {
    $('#3').show()
    $('#2, #1').hide()
})

Answer 1

http://jsfiddle.net/4rfYB/2/

$('nav a').click(function() {
  $('.navLinks').hide();                 // Hide all
  $(this.getAttribute('href')).show();   // Show HREF/to/ID one
});

so you just need to get hrefyour anchor (i.e. #1) and specify the jQuery element id $()represented by this href value :)

If you want oneliner : http://jsfiddle.net/4rfYB/5/

$('.navLinks').hide().filter(this.getAttribute('href')).show();

, .eq() .index() http://jsfiddle.net/4rfYB/7/

$('.navLinks').hide().eq( $(this).index() ).show();

_{, HTML5!}

Answer 2

nums 1,2,3

.

$('nav a').click(function() {
  $('.navLinks').hide();
  var index = $('nav a').index(this);
  $('.navLinks').eq(index).show();
})

http://jsfiddle.net/rtGk6/1/

Answer 3

.data() HTML

<nav>
     <a id="link1" class="link" href="#1" data-id="1">1</a>
     <a id="link2" class="link" href="#2" data-id="2">2</a>
     <a id="link3" class="link" href="#3" data-id="3">3</a>
</nav>

JQuery

$('.link').click(function() {
    var id = $(this).data('id');  
    $(".navLinks").hide();
    $("#"+id).show();
})

Fiddle

Answer 4

. . , href . jsfiddle

$('.links').click(function() {
var id = $(this).attr('id').split('-').pop();
$('.navLinks').hide();
$('#'+id).show();
})

Answer 5

jquery nav > a, dom. jQuery $(this), , :

<div class="nav">
    <nav>
       <a id="link1" href="#1">1</a>
       <a id="link2" href="#2">2</a>
       <a id="link3" href="#3">3</a>
    </nav>
</div>

<div id="1" class="navLinks"> content 1 </div>
<div id="2" class="navLinks"> content 2 </div>
<div id="3" class="navLinks"> content 3 </div>

javascript:

jQuery("nav a").click(function(){
    jQuery(".navLinks").hide();
    var num = jQuery(this).attr("id").replace("link","");
    jQuery("#"+num).show()
})

http://jsfiddle.net/k3aAg/

Answer 6

, , jQuery , :

(data- *) href.

, style='display:none'. CSS JS .

jQuery . toggle() / , / acrodingly.

, , , , .

fidle

HTML

<div class="nav">
    <nav>
       <a href="#" data-id="1">1</a>
       <a href="#" data-id="2">2</a>
       <a href="#" data-id="3">3</a>
    </nav>
</div>

<div id="1" class="navLinks" style='display:none'> content 1 </div>
<div id="2" class="navLinks" style='display:none'> content 2 </div>
<div id="3" class="navLinks" style='display:none'> content 3 </div>

JS

$('nav a').click(function(e) {
    e.preventDefault(); //stop the normal link click event.
    var divId = $(this).attr('data-id'); //get the target Div ID.
    $('#'+divId).toggle(); //toggle will hide/show the div properly
});