Question

我正在制作一个tumblr主题，并设法有3个切换链接。他们工作正常，但我想知道是否可以这样做，如果第一个切换链接打开，我点击第二个切换链接，第一个将关闭，而不是只是堆叠？

相关代码：

脚本：

$(document).ready(function(){
    $(".changer").click(function(){
        $(".slidey").toggleClass("change_it");
    });
    $(".changer2").click(function(){
        $(".slidey2").toggleClass("change_it");
    });
    $(".changer3").click(function(){
        $(".slidey3").toggleClass("change_it");
    });
});

HTML

<li><a href="#" class="changer"><i class="fa fa-envelope fa-fw"></i> Mail</a></li>
<li><a href="#" class="changer2"><i class="fa fa-link fa-fw"></i> Links</a></li>
<li><a href="#" class="changer3"><i class="fa fa-th fa-fw"></i> Blogroll</a></li>


   <div class="slidey">
       Yo yo
   </div>
   <div class="slidey2">
       linkies
   </div>
   <div class="slidey3">
       blogroll
   </div>

here is the page

还应该注意到我对js / jquery不太好

Answer 1

烨。以这种方式使用它：

＆＃13;

$(document).ready(function(){
  $(".changer").click(function(){
    if ($(".slidey" + $(this).data("slidey")).hasClass("change_it"))
    {
      $(".slidey" + $(this).data("slidey")).removeClass("change_it");
      return false;
    }
    $(".slidey1, .slidey2, .slidey3").removeClass("change_it");
    $(".slidey" + $(this).data("slidey")).addClass("change_it");
    return false;
  });
});

＆＃13;

* {font-family: 'Segoe UI', sans-serif; text-decoration: none;}
.change_it {font-weight: bold;}

.tabs, .tabs li {display: inline-block; margin: 0; padding: 0; list-style: none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tabs">
  <li><a href="#" class="changer" data-slidey="1"><i class="fa fa-envelope fa-fw"></i> Mail</a></li>
  <li><a href="#" class="changer" data-slidey="2"><i class="fa fa-link fa-fw"></i> Links</a></li>
  <li><a href="#" class="changer" data-slidey="3"><i class="fa fa-th fa-fw"></i> Blogroll</a></li>
</ul>

<div class="slidey1">Slidey 1</div>
<div class="slidey2">Slidey 2</div>
<div class="slidey3">Slidey 3</div>

＆＃13;

Answer 2

我避免代码重复添加引用您想要滑动的部分ID的数据部分，否则每次想要一个新部分时都会重复自己。

所以在你的链接中：

<li><a href="#" class="changer" data-section="#mail"><i class="fa fa-envelope fa-fw"></i> Mail</a></li>
<li><a href="#" class="changer" data-section="#links"><i class="fa fa-link fa-fw"></i> Links</a></li>
<li><a href="#" class="changer" data-section="#blogroll"><i class="fa fa-th fa-fw"></i> Blogroll</a></li>

你的部分看起来像是：

<div id="blogroll">blogroll</div>

最后你的jquery代码如下：

$(document).ready(function() {
  $(".changer").click(function() {

    var sectionToChange = $(this).data('section');

    $(".change_it:not("+sectionToChange+")").removeClass('change_it');

    $(sectionToChange).toggleClass("change_it");
  });
});

因此，无需在每次创建新的可滑动部分时都返回它。

更新：概念的演示

＆＃13;

$(document).ready(function() {
  $(".changer").click(function() {

    var sectionToChange = $(this).data('section');

    $(".change_it:not("+sectionToChange+")").removeClass('change_it');

    $(sectionToChange).toggleClass("change_it");
  });
});

＆＃13;

* {
  font-family: 'Segoe UI', sans-serif;
  text-decoration: none;
}
.change_it {
  font-weight: bold;
}
.tabs,
.tabs li {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="tabs">
  <li><a href="#" class="changer" data-section="#mail"><i class="fa fa-envelope fa-fw"></i> Mail</a>
  </li>
  <li><a href="#" class="changer" data-section="#links"><i class="fa fa-link fa-fw"></i> Links</a>
  </li>
  <li><a href="#" class="changer" data-section="#blogroll"><i class="fa fa-th fa-fw"></i> Blogroll</a>
  </li>
    <li><a href="#" class="changer" data-section="#contacts"><i class="fa fa-th fa-fw"></i> Contacts</a>
  </li>
    <li><a href="#" class="changer" data-section="#wiki"><i class="fa fa-th fa-fw"></i> Wiki</a>
  </li>
    <li><a href="#" class="changer" data-section="#about"><i class="fa fa-th fa-fw"></i> About</a>
  </li>
</ul>

<div id="mail">Mail</div>
<div id="links">Links</div>
<div id="blogroll">Blogroll</div>
<div id="contacts">Contacts</div>
<div id="wiki">Wiki</div>
<div id="about">About</div>

＆＃13;

单击另一个切换链接时删除切换类

2 个答案: