Question

如何通过点击导航锚来切换隐藏的div？

请看这个小提琴http://jsfiddle.net/rabelais/4rfYB/1/

我通过单独命名每个id已经写了很长的路，但是必须有一个更短的方式来写这个？

$('#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
});

因此您只需要获取锚点的href（即#1）并定位该href值所代表的jQuery $()元素ID：）

如果您想要 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();

_{请注意数字ID 仅在 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 solution

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

Answer 5

使用基于nav＆gt;的jquery选择器; 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不熟悉并且想学习，所以我会给你一些指示：

使用Custom Data Attributes（data- *）存储自定义变量，而不是使用href。

要最初隐藏元素，请编写内联style='display:none'。 CSS 和 JS 会加载一些延迟，并可能会产生难看的效果。

如果组件可见/隐藏，jQuery .toggle()将隐藏/显示组件。

以下是一个如何更清晰地解决问题的示例，它是 NOT 最有效的方式，但很容易理解。

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
});

点击导航切换隐藏的div？

6 个答案: