Question

制作一个简单的jquery选项卡小部件。它运行正常，但我想在第一次加载时没有标签或面板打开它。为了做到这一点，我从第一个选项卡和第一个面板（id panel1）中删除了类活动标签，但它没有运行。不知道为什么。

HTML：

<div class="wrapper tab-panels">
  <ul class="tabs">
    <li rel="panel1" class="active">panel1</li>
    <li rel="panel2">panel2</li>
    <li rel="panel3">panel3</li>
    <li rel="panel4">panel4</li>
  </ul>
  <div class="panel active" id="panel1">
    conten1<br>
    conten1<br>
    conten1<br>
    conten1<br>
    conten1<br>
  </div>
  <div class="panel" id="panel2">
    conten2<br>
    conten2<br>
    conten2<br>
    conten2<br>
    conten2<br>
  </div>
  <div class="panel" id="panel3">
    conten3<br>
    conten3<br>
    conten3<br>
    conten3<br>
    conten3<br>
  </div>
  <div class="panel" id="panel4">
    conten4<br>
    conten4<br>
    conten4<br>
    conten4<br>
    conten4<br>
  </div>
</div>

JQUERY：

  $(function () {
      $(".tab-panels .tabs li").on("click", function () {
          var $panel = $(this).closest(".tab-panels");
          if ($(this).hasClass("active") == true) {
              $(this).removeClass("active");
              $(".tab-panels .panel.active").slideUp(300);
          } else {
              $panel.find(".tabs li.active").removeClass("active");
              $(this).addClass("active");
              var panelToShow = $(this).attr("rel");

              function showNextPanel() {
                  $(this).removeClass("active");
                  $("#" + panelToShow).slideDown(300, function () {
                      $(this).addClass("active");
                  });
              }
              $panel.find(".panel.active").slideUp(300, showNextPanel);
          }
      });
  });

CSS：

.tab-panels ul {
    margin: 0;
    padding: 0;
}

.tab-panels ul li {
    list-style-type: none;
    display: inline-block;
    background: red;
    margin: 0;
    padding: 3px 10px;
    color: white;
    cursor: pointer;
 }

.tab-panels ul li:hover {
   color: #fff;
   background: #666;
}

.tab-panels ul li.active {
   color: #fff;
   background: #666;
}

.tab-panels .panel {
  display: none; 
  background: blue;
  padding: 10px;
}

.tab-panels .panel.active {
  display: block;
}

Answer 1

查看此JSFiddle，它首先向上滑动所有面板并从所有元素中删除所有活动类。然后当您单击一个面板时，它将关闭另一个面板，然后打开所选面板.. < / p>

$(document).ready(function(){
    $(".tab-panels .tabs li").each(function(){
        $(this).removeClass("active");
    });
    $(".tab-panels .panel").each(function(){
         $(this).slideUp(300);
    });

    $(".tab-panels .tabs li").on("click", function () {
        if($(this).hasClass("active") == true){
            $(this).removeClass("active");
            var selected_panel = $(this).text();
            $(".tab-panels #"+selected_panel).slideUp(300);
        }
        else{
            $(".tab-panels .tabs li.active").removeClass("active");
            $(".tab-panels .panel").each(function(){
                 $(this).removeClass("active");
                 $(this).slideUp(300);
            });
            $(this).addClass("active");
            var selected_panel = $(this).text();
             $(".tab-panels #"+selected_panel).slideDown(300);        
        }
    });
});

Answer 2

你的代码工作正常你只需要在css中设置一个初始条件：

.panel:not(.active){
    display:none
}

fiddle

没有类标记，Jquery无法正常工作

2 个答案: