我正在尝试更改其中的内容,ul
以便它可以匹配当前单击的内容button
。
<div class="btns">
<button class="active"></button>
<button></button>
<button></button>
</div>
<ul class="dynamiq_content">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<script>
//variables
const ContentBtns = $(".btns button");
const content = $(".dynamiq_content li");
//function
ContentBtns.on("click", function () {
$(this).addClass("active").siblings().removeClass("active");
content.addClass("active");
});
</script>
如果要匹配按钮和li
元素,则可以使用数组。
这是代码段:
//variables
var ContentBtns = $(".btns button");
var content = $(".dynamiq_content li");
//function
for(let i=0;i<=ContentBtns.length;i++){
ContentBtns.eq(i).on("click", function(){
content.removeClass();
ContentBtns.removeClass();
ContentBtns.eq(i).addClass("active");
content.eq(i).addClass("active");
});
}
.active{color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btns">
<button class="active">a</button>
<button>b</button>
<button>c</button>
</div>
<ul class="dynamiq_content">
<li class="active">a</li>
<li>b</li>
<li>c</li>
</ul>
谢谢这个,它确实起作用了:)
别客气。