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

IT技术 javascript jquery html css twitter-bootstrap
2021-02-17 03:16:57

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

这些是模式打开的 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 轻松完成。但我不知道该怎么做。所以，请谁能帮我解决我的问题。提前谢谢你？

6个回答

从 .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/

我尝试了该解决方案，但对我不起作用。我正在使用导航药丸而不是导航标签。这是我尝试过的jsfiddle.net/Lumyc4gs/1有人可以帮我让它工作吗？我在我的应用程序中使用 angularJs，所以可能是更简单的解决方案？
2021-04-20 03:16:57
没关系，通过结合此线程jsfiddle.net/Lumyc4gs/2 中的一些解决方案来使其工作
2021-04-22 03:16:57
@Skippr 如果删除选项卡窗格 ID，每个导航选项卡锚点如何链接到其选项卡窗格？
2021-04-29 03:16:57
总结一下这里发生的事情：在导航标签.tab('show')上被调用<a><li>
2021-05-13 03:16:57
选项卡窗格id是不必要的，修改href对我来说感觉很奇怪。更id简洁的解决方案是向每个选项卡添加一个：然后您可以将长选择器更改为简单的$('#' + tab).tab('show');
2021-05-17 03:16:57

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;
    }); 
}
location.hash首先也读取哈希有什么问题？
2021-04-18 03:16:57
@alias51 这样您就可以将包含哈希的 URL 加入书签，并在您访问它时自动打开正确的选项卡。
2021-04-20 03:16:57
@Alnitak 是的，我不明白为什么您需要更新它以重新加载页面
2021-04-25 03:16:57
id 必须在引号之间： $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
2021-05-08 03:16:57

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

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

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

或者，如果您使用的是 HREF $('.nav-tabs a[href="#home"]').tab('show')
2021-05-03 03:16:57

嗨，试试这个！

$('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>

感谢上面的回答，这是我现在正在运行的 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');
      };
其它你可能感兴趣的问题
上一篇在 JSDoc 中记录开放式参数函数的正确方法 下一篇fetch - multipart/form-data POST 中缺少边界