当我单击选项卡时,它会显示关联的内容。我正在使用 #
来做到这一点。这是我尝试过的方法,但我不知道如何进行切换部分,有人可以帮忙吗?
所以当点击tab1显示tab1内容,点击tab2显示tab2内容等。
$(document).ready(function () {
$('.tab-content:not(:first)').hide();
$('.tab-menu li a').click(function () {
$(this).addClass('active').siblings().removeClass('active');
});
});
.tab-menu {
padding: 0;
}
.tab-menu li {
display: inline-block;
}
.tab-menu .active {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tab-menu">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
</ul>
<p id="tab-1" class="tab-content">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>
编辑,我不喜欢使用 jQuery UI 或任何插件。
最佳答案
你离这里很近,只有几件事:
1) 我建议将“事件”类应用到父类 <li>
这样您的突出显示将更容易获得
2) 使用 href
单击链接的内容来切换内容,我会使用一个类来隐藏/显示内容,但是我将按照您使用 show()
的示例提供 jQuery和 hide()
方法。两种方法都行得通。
最终的 jQuery 应该是这样的:
$(document).ready(function() {
$('.tab-content').slice(1).hide();
$('.tab-menu li').eq(0).addClass('active');
$('.tab-menu li a').click(function(e) {
e.preventDefault();
var content = $(this).attr('href');
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
$(content).show();
$(content).siblings('.tab-content').hide();
});
});
它在 fiddle 中工作以供引用:http://jsfiddle.net/yscbeaxh/
关于javascript - 如何在没有 jQuery UI 的情况下创建简单的 jQuery 选项卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31657981/