我正在尝试保存Bootstrap导航选项卡的活动状态,并将它们作为隐藏字段发送到表单中,以便我可以在下次加载页面时保持活动状态。
我的导航标签是;
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" index="1" class="active"><a href="#text-only" aria-controls="text-only" role="tab" data-toggle="tab">Text only</a></li>
<li role="presentation" index="2"><a href="#with-pic" aria-controls="with-pic" role="tab" data-toggle="tab">With Pic</a></li>
<li role="presentation" index="3"><a href="#gallery" aria-controls="gallery" role="tab" data-toggle="tab">Gallery</a></li>
<li role="presentation" index="4"><a href="#map-view" aria-controls="map-view" role="tab" data-toggle="tab" >Map View</a></li>
</ul>
我的内容导航标签是
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="text-only">
</div>
<div role="tabpanel" class="tab-pane" id="with-pic">
</div>
<div role="tabpanel" class="tab-pane" id="gallery">
</div>
<div role="tabpanel" class="tab-pane" id="map">
</div>
</div>
我想通过表单输入字段发送活动状态,如
<form action="" method="get" name="search_form">
<input type="hidden" name="active_nav_tab" value="">
<input type="hidden" name="active_nav_content" value="">
<input type="submit" value="submit">
</form>
一个逻辑是通过Jquery获取活动标签,但是我将在表单字段中传递的值是什么。我被卡住了。真的很感激任何帮助
答案 0 :(得分:0)
以下是您需要做的事情,以获得您想要的选定“标签”,然后从php阅读或检查匹配并相应地设置活动元素:
JQuery的:
$(function () {
$('#myForm').submit(function () {
var active_nav_tab = $('ul.nav-tabs li.active').attr('index'); //get index
var active_nav_content = $('.tab-content .active').attr('id'); //get id
$('#myForm input[name=active_nav_tab]').val(active_nav_tab);
$('#myForm input[name=active_nav_content]').val(active_nav_content);
});
});
我刚刚在表单中添加了ID:
<form action="" method="get" id="myForm" name="search_form">
<input type="hidden" name="active_nav_tab" value="">
<input type="hidden" name="active_nav_content" value="">
<input type="submit" value="submit">
</form>
编辑:
然后“重新加载”活动标签,你会做这样的事情:
$(function () {
//reload the last "active" li
$('ul.nav-tabs li').each(function () {
var index = $(this).attr('index');
//do your check
if (index == "the number you passed back earlier") {
}
});
//reload the last "active" tabpanel
$('.tab-content > div').each(function () {
var id = $(this).attr('id');
//do your check
if (id == "the id you passed back earlier") {
}
});
});
答案 1 :(得分:0)
对我来说这是最好的解决方案,适用于标准的bootstrap nav-tab
$(document).ready(function() {
/*disable non active tabs*/
$('.nav li').not('.active').addClass('disabled');
$('.nav li').not('.active').find('a').removeAttr("data-toggle");
$('#next').click(function(){
/*enable next tab*/
$('.nav li.active').next('li').removeClass('disabled');
$('.nav li.active').next('li').find('a').attr("data-toggle","tab")
$('.nav li.active').next('li').find('a').tab('show')
$('.nav li').not('.active').addClass('disabled');
$('.nav li').not('.active').find('a').removeAttr("data-toggle");
});
$('#prev').click(function(){
/*enable prev tab*/
$('.nav li.active').prev('li').removeClass('disabled');
$('.nav li.active').prev('li').find('a').attr("data-toggle","tab")
$('.nav li.active').prev('li').find('a').tab('show')
$('.nav li').not('.active').addClass('disabled');
$('.nav li').not('.active').find('a').removeAttr("data-toggle");
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home Content</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile Content</div>
<div role="tabpanel" class="tab-pane" id="messages">Messages Content</div>
<div role="tabpanel" class="tab-pane" id="settings">Settings Content</div>
</div>
<button id="prev">Previus</button>
<button id="next">Next</button>
</div>
&#13;