gpt4 book ai didi

没有类标签,Jquery 无法工作

转载 作者:行者123 更新时间:2023-11-28 09:57:27 25 4
gpt4 key购买 nike

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

最佳答案

看看这个 JSFiddle ,它首先向上滑动所有面板并从所有元素中删除所有事件类。然后当您单击一个面板时,它将关闭另一个面板然后打开所选面板..

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

关于没有类标签,Jquery 无法工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24851075/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com