Question

我似乎遇到了一个无法找到答案的问题。

我在页面上有5个Href链接，它们都具有匹配的div容器ID。单击时，我想隐藏除ID与编号匹配的容器之外的所有Div容器。

我有以下HTML：

<div class="sidebar1">
<ul class="nav">
<li> 
- <a href="#" onclick="show1">1</a> 
- <a href="#" class="show2">2</a> 
- <a href="#" onclick="show3">3</a> 
- <a href="#" onclick="show4">4</a>
- <a href="#" onclick="show5">5</a> -
</li></ul>
      <div id="1">1111</div>
      <div id="2">2222</div>
      <div id="3">3333</div>
      <div id="4">4444</div>
      <div id="5">5555</div>
  </div>

然后我设置了功能。我已尝试通过Class和Onclick进行链接，正如您将从上方/下方看到的那样。

脚本是：

<script type="text/javascript">
    $(document).ready(function() {
        $("#2").hide();
        $("#3").hide();
        $("#4").hide();
        $("#5").hide();
    })

    function show1() {
        $("#2").hide();
        $("#3").hide();
        $("#4").hide();
        $("#5").hide();
        $("#1").show();
    };

    $('.show2 a').click(function() {
        $("#2").show();
        $("#3").hide();
        $("#4").hide();
        $("#5").hide();
        $("#1").hide();
    });
</script>

提前致谢

Answer 1

fiddle Demo

更改了HTML

<ul class="nav">
    <li>
        - <a href="#" data-id="1">1</a> //data-id to get target id
        - <a href="#" data-id="2">2</a> 
        - <a href="#" data-id="3">3</a> 
        - <a href="#" data-id="4">4</a>
        - <a href="#" data-id="5">5</a> -
    </li>
</ul>

<强> JS

$(document).ready(function () {
    var div_all = $("#1,#2,#3,#4,#5"); //cache all div's
    div_all.not('#1').hide(); //hide all but not element with id 1
    $('ul.nav a').click(function () { //user click on a tag inside ul with class nav
        var id = $(this).data('id'); //get data-id attribute to get target id
        div_all.hide();//hide all div's
        $('#' + id).show(); //show the current target div
    });
});

.data()

.not()

<小时/> http://www.w3.org/TR/html5/dom.html#the-id-attribute

注意：ID可以采取的形式没有其他限制;在特别是，ID可以只包含数字，以数字开头，开始带下划线，仅包括标点符号等。

Answer 2

您可以使用类来执行您想要执行的操作，而无需键入所有选择器：

  <div class="ShowDiv">1111</div>
  <div class="ShowDiv">2222</div>
  <div class="ShowDiv">3333</div>
  <div class="ShowDiv">4444</div>
  <div class="ShowDiv">5555</div>
  ...

然后在你的点击处理程序

上

$('.ShowDiv').click(function () {
     $(this).show();                 //show the div that was clicked
     $('.ShowDiv').not(this).hide(); //hide all other divs in that class
});//$('.ShowDiv').click(function () {

JQuery显示/隐藏链接问题

2 个答案: