动态引导导航选项卡

Question

我正在尝试保存 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 获取活动选项卡，但我将在表单字段中传递的值是什么。我被困住了。非常感谢任何形式的帮助

Answer 1

这是您需要执行的操作才能获得所需的选定“标签”，然后在从 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") {
            }
        });
    });

Answer 2

这对我来说是最好的解决方案，适用于标准引导导航选项卡

$(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");
  });
});

<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>