如何在使用jQuery单击特定链接后打开引导导航选项卡的特定选项卡？

70

我是jquery和bootstrap的新手，所以请考虑我的错误。我创建了用于登录和注册的bootstrap模式。它包含两个分别称为登录和注册的导航选项卡。我有两个按钮弹出相同的Modal窗口，但在Modal窗口中显示不同的选项卡。每个选项卡中都有一个带有许多输入的表单。我的问题是，当我单击“登录”按钮时，在模式中弹出“登录”选项卡时弹出模式，而当我单击页面上的“注册”按钮时，则打开注册选项卡。

这些是模态打开的2个链接：

<div class="header-login-li" style="background-color:gray;float:left;width:100px;height:60px;">
<a data-toggle="modal" href="#regestration" class="header-register-a" >
<big>
<font color="white" class="header-register-font"><center style="margin-top:20px;">Login <i class="icon-chevron-down" style="font-size:20px"></i></center></font>
</big></a></div>

<div class="header-register-li" style="background-color:green;float:right;margin-right:-15px;width:130px;height:60px;">
<a data-toggle="modal" href="#regestration" class="header-register-a" >
<big>
<font color="white" class="header-register-font"><center style="margin-top:20px;">Register</center></font>
</big></a>

这是我的标签及其内容的代码（我在这里避免不必要的代码）：

 <div class="tabbable" >
      <ul class="nav nav-tabs" ><!--tabs-->
        <li class="active" style="position:absolute;margin-left:0px;" id="logintab">
        <a href="#pane_login" data-toggle="tab">Login</a></li>
        <li style="margin-left:70px;" id="reg_tab" ><a href="#pane_reg" data-toggle="tab">Registration</a></li>

      </ul>
      <div class="tab-content"><!--login tab content-->
         <div id="pane_login" class="tab-pane active">
             <form id="login-form" target="login-signup-iframe" method="post" action="#" name="login-form">

              </form>

        </div><!--/pane_login-->

        <div id="pane_reg" class="tab-pane"><!--registration tab content-->
           <form id="regestration-form" target="login-signup-iframe" method="post" action="#" name="regestration-form">

            </form>
         </div>
        </div><!-- /.tab-content -->
</div><!-- /.tabbable -->

我认为可以通过jquery轻松完成。但是我不知道该怎么做。所以，请任何人可以帮助我解决我的问题。谢谢您？

javascript  jquery  html  css  twitter-bootstrap 
— sachin_ware
source

Answers:

151

从.nav-tabs应用选择器似乎有效

HTML是

<ul class="nav nav-tabs">
    <li><a href="#aaa" data-toggle="tab">AAA</a></li>
    <li><a href="#bbb" data-toggle="tab">BBB</a></li>
    <li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="aaa">...Content...</div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>

脚本是

$(document).ready(function(){
  activaTab('aaa');
});

function activaTab(tab){
  $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

http://jsfiddle.net/pThn6/80/

— 斯里达河
source
4
标签窗格id是不必要的，并且改变了href我的感觉。较干净的解决方案是在id每个标签中添加一个：然后您可以将长选择符更改为简单的内容$('#' + tab).tab('show');
— skippr 2014年
2
@Skippr如果删除选项卡窗格ID，每个nav-tabs锚点如何链接到其选项卡窗格？
— JohnnyHK '16
总结一下这里发生的事情：导航选项卡.tab('show')上的被调用<a><li>
— dave thompson
我尝试了该解决方案，但不适用于我。我使用的是nav-pills，而不是nav-tabs。这是我尝试过的内容jsfiddle.net/Lumyc4gs/1有人可以帮我使它工作吗？我在应用程序中使用angularJs，所以可能是更简单的解决方案？
— Naomi
没关系，可以通过组合此线程中的一些解决方案来使其工作jsfiddle.net/Lumyc4gs/2
— Naomi，
15

HTML：

<a href="PageName.php#tabID">link to other page tab</a>

Javascript：

window.onload = function(){  

    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
    }

    //Change hash for page-reload
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').on('shown', function (e) {
        window.location.hash = e.target.hash;
    }); 
}
— 拉赫
source
2
id必须在引号之间：$('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
— Mathieu Schaeffer
location.hash首先也读取哈希表有什么问题？
— 阿里尼塔克
@Alnitak是的，我不明白你为什么会需要更新它的页面重载
— alias51
1
@ alias51就是这样，您可以为包括哈希的URL添加书签，并在访问时自动打开正确的选项卡。
— Alnitak
10

您也可以通过标签ID进行访问，但是该ID在同一页面上是唯一的。这是一个相同的例子

$('#product_detail').tab('show');

在上面的例子中#product_details是nav tabid

— 尼康·K。
source
2
或者，如果您使用的是HREF$('.nav-tabs a[href="#home"]').tab('show')
— Adarsh Madrecha
5

嗨，试试这个人！

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  // save current clicked tab in local storage does not work in Stacksnippets
  // localStorage.setItem('lastActiveTab', $(this).attr('href'));
});
//get last active tab from local storage
var lastTab = "#profile"; // localStorage.getItem('lastActiveTab');
console.log(lastTab + "tab was last active")
if (lastTab) {
  $('[href="' + lastTab + '"]').tab('show');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <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</div>
      <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
      <div role="tabpanel" class="tab-pane" id="messages">Message</div>
      <div role="tabpanel" class="tab-pane" id="settings">Settings</div>
    </div>

  </div>
</div>
展开摘要

— 可能的
source
3

感谢上述回答，这是我现在可以使用的jQuery代码：

      $(".header-login-li").click(function(){
        activaTab('pane_login');                
      });

      $(".header-register-li").click(function(){
        activaTab('pane_reg');
        $("#reg_log_modal_header_text").css()
      });

      function activaTab(tab){
        $('.nav-tabs a[href="#' + tab + '"]').tab('show');
      };
— sachin_ware
source
1 
    function updateURL(url_params) {
        if (history.pushState) {
        var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + url_params;
        window.history.replaceState({path:newurl},'',newurl);
        }
    }

    function setActiveTab(tab) {
        $('.nav-tabs li').removeClass('active');
        $('.tab-content .tab-pane').removeClass('active');

        $('a[href="#tab-' + tab + '"]').closest('li').addClass('active');
        $('#tab-' + tab).addClass('active');
    }

    // Set active tab
    $url_params = new URLSearchParams(window.location.search);


    // Get active tab and remember it
    $('a[data-toggle="tab"]')
        .on('click', function() {
        $href = $(this).attr('href')
        $active_tab = $href.replace('#tab-', '');

        $url_params.set('tab', $active_tab);
        updateURL($url_params.toString());
    });

    if ($url_params.has('tab')) {
        $tab = $url_params.get('tab');
        $tab = '#tab-' + $tab;
        $myTab = JSON.stringify($tab);
        $thisTab = $('.nav-tabs a[href=' + $myTab  +']');
        $('.nav-tabs a[href=' + $myTab  +']').tab('show');
    }
— 扎卡里·希顿（Zachary Heaton）
source
0

我可以建议我在自己的网站上使用的php + css解决方案吗？这很简单，没有js问题:)

网址到页面： <a href="page.php?tab=menu1">link to menu1</a>

<?
$tab = $_GET['tab'];
?>
<ul class="nav nav-tabs">
  <li class="<? if ($tab=='menu1' OR $tab=='menu2') 
{
echo "";
} 
else {
echo "active";
}
?>"><a data-toggle="tab" href="#home">Prodotti</a></li>
  <li class="<? if ($tab=='menu1') 
{
echo "active";
} 
?>"><a data-toggle="tab" href="#menu1">News</a></li>
  <li class="<? if ($tab=='menu2') 
{
echo "active";
} 
?>"><a data-toggle="tab" href="#menu2">Gallery</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade <? if ($tab=='menu1' OR $tab=='menu2') 
{
echo "";
} 
else {
echo "in active";
}
?>
">
    <h3>Prodotti</h3>
    <p>Contenuto della pagina, zona prodotti</p>
  </div>
  <div id="menu1" class="tab-pane fade <? if ($tab=='menu1') 
{
echo "in active";
} 
?>">
    <h3>News</h3>
    <p>Qui ci saranno le news.</p>
  </div>
  <div id="menu2" class="tab-pane fade <? if ($tab=='menu2') 
{
echo "in active";
} 
?>">
    <h3>Gallery</h3>
    <p>Qui ci sarà la gallery</p>
  </div>
</div>
— 劳拉·加久洛（Laura Gargiulo）
source
2
您可能绝对不建议这样做。这是他/她所要求做的非常恶心的方式。
— 康纳·辛普森
0

我写了这个片段，我一直在使用它来处理这种确切的情况。

它使用纯JavaScript，因此也适用于没有jQuery的bootsrap5等情况。

<script type='text/javascript'>
    window.onhashchange=hashTriggerTab;
    window.onload=hashTriggerTab;
    
    function hashTriggerTab(){
        var current_hash=window.location.hash;
        if(current_hash.substring(0,1)=='#')current_hash=current_hash.substring(1);
        if(current_hash!=''){
            var trigger=document.querySelector('.nav-tabs a[href="#'+current_hash+'"]');
            if(trigger)trigger.click();
        }
    }
</script>

将其放置在适当的位置，您可以在同一页面上将它们链接在一起，例如：

<a href='#tabId'>Link Any Tab</a>

或从外部页面，如：

<a href='newpage.php#tabId'>Link From External</a>
— 托尔穆托
source
-1

不知道我是否理解正确，但是下面的代码片段是我用来从Bootstrap选项卡菜单打开链接的：

的HTML

<ul class="nav nav-tabs">
  <li class="active"><a href="#foo" data-toggle="tab">Foo</a></li>
  <li><a href="#bar" data-toggle="tab">Bar</a></li>
  <li><a href="baz.html" class="external">Baz</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="foo">Foo</div>
  <div class="tab-pane" id="bar">Bar</div>
</div>

Java脚本

$('.nav a:not(".external")').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})
— 火星罗伯逊
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.