Bootstrap 的多级选项卡面板 - 添加 class .active 2 第一个子面板
Multi-level tab Panel with Bootstrap - adding class .active 2 first-subpanel
我正在制作多级面板页面,基于Bootstrap。结构很好,但我希望子面板只有在父面板也处于活动状态时才处于活动状态。
我的代码如下:
<!-- NAV TABS N1-->
<div class="row">
<div class="col.......">
<ul class="nav nav-tabs">
<li class="active"><a href="#1A" data-toggle="tab">A</a></li>
<li><a href="#1B" data-toggle="tab">B</a></li>
</ul>
</div>
</div>
<!-- /.NAV TABS N1-->
<!-- CONTENT N1 -->
<div class="tab-content">
<!-- TAB CONTENT N1A -->
<div class="tab-pane fade active in" id="1A">
<div class="row">
<div class="col....">
<!-- NAV TABS N2 -->
<div class="row">
<div class="col.......">
<ul class="nav nav-tabs">
<li class="active"><a href="#1Aa" data-toggle="tab">A1</a></li>
<li><a href="#1Ab" data-toggle="tab">A2</a></li>
</ul>
</div>
</div>
<!-- /.NAV TABS N2 -->
<!-- CONTENT N2 -->
<div class="tab-content">
<!-- TAB CONTENT N21 -->
<div class="tab-pane fade active in" id="1Aa">
<h1>A1</h1>
<p>......</p>
</div>
<!-- TAB CONTENT N21 -->
<div class="tab-pane fade" id="1Ab">
<h1>A2</h1>
<p>......</p>
</div>
</div>
<!-- ./CONTENT N2 -->
</div>
</div>
<!-- /.TAB CONTENT N1A -->
<!-- TAB CONTENT N1B -->
<div class="tab-pane fade" id="1B">
<div class="row">
<div class="col....">
<!-- NAV TABS N2 -->
<div class="row">
<div class="col.......">
<ul class="nav nav-tabs">
<li class="active"><a href="#1Ba" data-toggle="tab">A1</a></li>
<li><a href="#1Bb" data-toggle="tab">A2</a></li>
</ul>
</div>
</div>
<!-- /.NAV TABS N2 -->
<!-- CONTENT N2 -->
<div class="tab-content">
<!-- TAB CONTENT N21 -->
<div class="tab-pane fade" id="1Ba">
<h1>A1</h1>
<p>......</p>
</div>
<!-- TAB CONTENT N21 -->
<div class="tab-pane fade" id="1Bb">
<h1>A2</h1>
<p>......</p>
</div>
</div>
<!-- ./CONTENT N2 -->
</div>
</div>
<!-- /.TAB CONTENT N1B -->
</div>
<!-- ./CONTENT N1 -->
我想在第一个子面板的父面板激活时触发它,点击它。所以它尝试了这一段 JQuery,但我不太擅长这个所以它不起作用:
$( "#1B" ).click(function () {
( "#1Ba" ).addClass('in active');
});
有什么想法吗?
我有类似的东西,也许能帮到你。如果你还需要,当然呵呵
function getRootChild(element, childs) {
childs.push(element);
if (element.next('li.child').length > 0) {
getRootChild(element.next('li.child'), childs);
}
}
$("li.list-group-item.root").on('click', function() {
var childs = [];
getRootChild($(this).next('li.child'), childs);
for(idx in childs) {
$(childs[idx]).slideToggle();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="list-group-item root">
<a href="#">
Root item
</a>
</li>
<li class="list-group-item child" style="display: none;">
<a href="#">
child 1
</a>
</li>
<li class="list-group-item child" style="display: none;">
<a href="#">
child 2
</a>
</li>
我正在制作多级面板页面,基于Bootstrap。结构很好,但我希望子面板只有在父面板也处于活动状态时才处于活动状态。
我的代码如下:
<!-- NAV TABS N1-->
<div class="row">
<div class="col.......">
<ul class="nav nav-tabs">
<li class="active"><a href="#1A" data-toggle="tab">A</a></li>
<li><a href="#1B" data-toggle="tab">B</a></li>
</ul>
</div>
</div>
<!-- /.NAV TABS N1-->
<!-- CONTENT N1 -->
<div class="tab-content">
<!-- TAB CONTENT N1A -->
<div class="tab-pane fade active in" id="1A">
<div class="row">
<div class="col....">
<!-- NAV TABS N2 -->
<div class="row">
<div class="col.......">
<ul class="nav nav-tabs">
<li class="active"><a href="#1Aa" data-toggle="tab">A1</a></li>
<li><a href="#1Ab" data-toggle="tab">A2</a></li>
</ul>
</div>
</div>
<!-- /.NAV TABS N2 -->
<!-- CONTENT N2 -->
<div class="tab-content">
<!-- TAB CONTENT N21 -->
<div class="tab-pane fade active in" id="1Aa">
<h1>A1</h1>
<p>......</p>
</div>
<!-- TAB CONTENT N21 -->
<div class="tab-pane fade" id="1Ab">
<h1>A2</h1>
<p>......</p>
</div>
</div>
<!-- ./CONTENT N2 -->
</div>
</div>
<!-- /.TAB CONTENT N1A -->
<!-- TAB CONTENT N1B -->
<div class="tab-pane fade" id="1B">
<div class="row">
<div class="col....">
<!-- NAV TABS N2 -->
<div class="row">
<div class="col.......">
<ul class="nav nav-tabs">
<li class="active"><a href="#1Ba" data-toggle="tab">A1</a></li>
<li><a href="#1Bb" data-toggle="tab">A2</a></li>
</ul>
</div>
</div>
<!-- /.NAV TABS N2 -->
<!-- CONTENT N2 -->
<div class="tab-content">
<!-- TAB CONTENT N21 -->
<div class="tab-pane fade" id="1Ba">
<h1>A1</h1>
<p>......</p>
</div>
<!-- TAB CONTENT N21 -->
<div class="tab-pane fade" id="1Bb">
<h1>A2</h1>
<p>......</p>
</div>
</div>
<!-- ./CONTENT N2 -->
</div>
</div>
<!-- /.TAB CONTENT N1B -->
</div>
<!-- ./CONTENT N1 -->
我想在第一个子面板的父面板激活时触发它,点击它。所以它尝试了这一段 JQuery,但我不太擅长这个所以它不起作用:
$( "#1B" ).click(function () {
( "#1Ba" ).addClass('in active');
});
有什么想法吗?
我有类似的东西,也许能帮到你。如果你还需要,当然呵呵
function getRootChild(element, childs) {
childs.push(element);
if (element.next('li.child').length > 0) {
getRootChild(element.next('li.child'), childs);
}
}
$("li.list-group-item.root").on('click', function() {
var childs = [];
getRootChild($(this).next('li.child'), childs);
for(idx in childs) {
$(childs[idx]).slideToggle();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="list-group-item root">
<a href="#">
Root item
</a>
</li>
<li class="list-group-item child" style="display: none;">
<a href="#">
child 1
</a>
</li>
<li class="list-group-item child" style="display: none;">
<a href="#">
child 2
</a>
</li>