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

Very Simple .toggleClass for Div's based on HREF

本文关键字：HREF Div 用于 简单 toggleClass 非常      更新时间：2023-09-26

这个问题已经解决了。以下是原始问题和最终代码。感谢您的帮助阿米特·乔基！

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

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/

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

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

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

演示 请注意，您已设置了"包裹头部"选项。您必须将其设置为"onload"或使用 DOM 就绪处理程序。

顺便说一句，您可以进行以下操作以及过渡

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

前，我自己在切换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();
    });
    });
相关文章：