是否可以添加额外的 jQuery 来为这些选项卡添加下拉菜单?
这是添加了下拉菜单项的 HTML:
<div class="tabs">
<ul class="tabs-nav">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2" >Tab 2</a></li>
<li><a href="#tab3" >Tab 3</a>
<ul><!-- added drop-down items -->
<li><a href="#son-of-tab3" >drop-down 1</a></li>
<li><a href="#son-of-tab3" >drop-down 2</a></li>
<li><a href="#son-of-tab3" >drop-down 3</a></li>
</ul>
</li><!-- end tab 3-->
</ul>
<div class="tabs-content">
<div id="tab1" class="content">
<!-- tab1 content -->
</div>
<div id="tab2" class="content">
<!-- tab2 content -->
</div>
<div id="tab3" class="content">
<!-- tab3 content -->
</div>
</div> <!-- /tabs-content -->
</div> <!-- /tabs -->
使选项卡工作但需要额外的东西才能使下拉菜单工作的 jQuery?
<script>
$(document).ready(function() {
//add active class to the first li
$('.tabs-nav li:first').addClass('active');
//hide all content classes.
$('.content').hide();
//show only first div content
$('.content:first').show();
//add the click function
$('.tabs-nav li').click(function(){
//remove active class from previous li
$('.tabs-nav li').removeClass('active');
//add active class to the active li.
$(this).addClass('active');
//hide all content classes
$(".content").hide();
//find the href attribute of the active tab
var activeTab = $(this).find("a").attr("href");
//fade in the content of active tab
$(activeTab).fadeIn(1000);
return false;
});
});
</script>
如果需要,我可以发布 css
非常感谢,