我的网站构建器有一个通用的选项卡功能，但我不喜欢它，所以我想我会学习如何自己构建一个。目前我对 CSS 比脚本更舒服，它显示了我创建的内容，它看起来像我想要的那样，但点击时还不能正常工作。
这是 JSFiddle:https://jsfiddle.net/6oq3t9ev/1/
<ul class="tab_conts" id="recent" style="display: block;">
<li class="tab_cont">
<a href="/test" class="tab_cont_link">Test</a>
<a>
<desc>Testing</desc>
</a>
</li>
<li class="tab_cont">
<a href="/test" class="tab_cont_link">Test</a>
<a>
<desc>Testing</desc>
</a>
</li>
</ul>
<ul class="tab_conts" id="new" style="display: none;">
<li class="tab_cont">
<a href="/test" class="tab_cont_link">Test</a>
<a>
<desc>Testing</desc>
</a>
</li>
<li class="tab_cont">
<a href="/test" class="tab_cont_link">Test</a>
<a>
<desc>Testing</desc>
</a>
</li>
<li class="tab_cont">
<a href="/test" class="tab_cont_link">Test</a>
<a>
<desc>Testing</desc>
</a>
</li>
</ul>
$(document).on("ready int:ready", function() {
var e = $(".tab_name"),
t = $(".tab_conts").hide();
e.prependTo(".tabs-cn"), e.click(function(n) {
n.preventDefault();
var i = $(this),
r = e.index(i);
e.removeClass("tab_name-active"), i.addClass("tab_name-active"), t.hide().eq(r).show()
}), e.first().click() })
最佳答案
像这样的东西应该可以解决问题:
$(文档).ready(函数(){
$('.tab_name').on('点击',function(){
var href = $(this).attr('href');
$('.tab_conts').css({'display':'none'});
$(href).css({'display':'block'})
});
});
附言。确保你的头脑中包含了 jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
关于javascript - 创建了一个选项卡但点击后无法正常工作 - jQuery 问题/新手，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37191979/