没有类标记Jquery无法工作

制作了一个简单的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>

CSS:

检查这个，它从向上滑动所有面板开始，并从所有元素中移除所有活动类。。然后，当您单击一个面板时，它将关闭另一个面板，然后打开所选面板

$(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);        
        }
    });
});

---

您的代码运行良好您只需在css中设置初始条件：

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

$(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);        
        }
    });
});

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