Question

此问题已解决。以下是原始问题和最终代码。感谢Amit Joki的帮助！

我正在尝试使用类“i”制作A标签，点击显示/隐藏基于其ID用作锚点的div。如果单击一个链接，则应将另一个链接切换回隐藏。

Javascript：

$(".i").on('click', function(e) {
  $("div").each(function() {
    $('div.show').hide().toggleClass("show hidden");
  });
  $($(this).attr("href")).fadeIn(1000, 'swing').toggleClass("hidden show");
});

.hidden {
  display: none;
}
.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#1" class="i"> Div 1 </a>
<a href="#2" class="i"> Div 2 </a>

<div id="1" class="hidden">
  <div>Div 1</div>
</div>

<div id="2" class="hidden">
  <div>Div 2</div>
</div>

http://jsfiddle.net/krY56/180/

Answer 1

语法是将类分隔为同一字符串中的空格。不是一个单独的论点。

此外，attr是一种jQuery方法，因此您需要$(this)而不仅仅是this。此外，您需要包装href，以便生成jQuery对象。

$( ".i" ).on('click', function(e) {
    $($(this).attr("href")).toggleClass("hidden show");
});

DEMO注意，您已设置选项＆＃34;包裹在头部＆＃34;。您可以将其设置为＆＃34; onload＆＃34;或使用DOM就绪处理程序。

顺便说一下，您可以进行以下操作以及转换

$( ".i" ).on('click', function(e) {
    $($(this).attr("href")).toggle('fade');
});

Answer 2

几个月前，我在切换-DIVS时遇到了类似的问题。寻找这样的东西？：

http://jsfiddle.net/tu0xjdpc/1/

<style> .targetDiv {display: none;
           z-index: 5;
           position: absolute;
           top: 40px;
         }
</style>

<table>
<tr>

 <td class="abc">
 <button class="showSingle" target="00">x</button></td>
 <td class="abc">
 <button class="showSingle" target="01">xx</button></td>
 <td class="abc">
 <button class="showSingle" target="02">xxx</button></td>

 </tr>
 </table>
     <div id="testdiv">
<div id="div00" class="targetDiv"><img src="http://www.top13.net/wp-content/uploads/2014/11/43-small-flowers.jpg"></div>
<div id="div01" class="targetDiv"><img src="http://ps.errazib.com/img/04closeup/41live/flower.small.jpg"></div>
<div id="div02" class="targetDiv"><img src="http://www.top13.net/wp-content/uploads/2014/11/22-small-flowers.jpg"></div>


  jQuery(function(){
    jQuery('.showSingle').click(function(){
          jQuery('.targetDiv').slideUp();
          jQuery('.targetDiv').hide();
          jQuery('#div'+$(this).attr('target')).slideToggle();
    });
    });

Div的非常简单的.toggleClass基于HREF

2 个答案: