Javascript 如何使用jQuery在单击特定链接时打开引导导航选项卡的特定选项卡？ 我是jQuery和Bootstrap的新手，所以请考虑我的错误。我为登录和注册创建了一个引导模式。它包含两个导航选项卡，称为登录和注册。我有两个按钮，弹出相同的模式窗口，但在模式窗口内显示不同的选项卡。每个选项卡中都有一个表单，其中包含许多输入。我的问题是，当我点击“登录”按钮时，会弹出模式，登录选项卡在模式中打开，当我点击页面上的“注册”按钮时，注册选项卡打开

以下是打开模式的两个链接：

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

以下是我的选项卡代码及其内容（我在这里避免不必要的代码）：

我认为通过jquery可以很容易地做到这一点，但我不知道该怎么做。

---

那么，有谁能帮我解决我的问题吗？提前谢谢你？

从.nav选项卡应用选择器似乎很有效

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>

---

感谢您的上述回答，以下是我的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');
      };

---

不确定我是否理解正确，但下面是我用来从引导选项卡菜单打开链接的片段：

HTML HTML:

---

我可以推荐一个我在我的网站上使用的php+css解决方案吗？ 它很简单，没有js问题：）

页面url:

您也可以通过选项卡Id进行访问，但该Id对于同一页面是唯一的。
这里有一个同样的例子

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

在上面的示例中，
#产品详细信息
是
nav
选项卡
id
大家好，试试这个吧


$（'a[data toggle=“tab”]”）。打开（'show.bs.tab'，函数（e）{
//在本地存储中保存当前单击的选项卡在Stacksnippets中不起作用
//localStorage.setItem（'lastActiveTab'，$（this.attr（'href'））；
});
//从本地存储获取最后一个活动选项卡
var lastTab=“#profile”//getItem（'lastActiveTab'）；
console.log（lastTab+“选项卡上次处于活动状态”）
如果（最后一个选项卡）{
$（'[href=“'+lastTab+'“]”）选项卡（'show'）；
}







家
轮廓
消息
设置
我写了这个片段，我一直用它来处理这个确切的案例

它是纯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>


window.onhashchange=hashTriggerTab；
window.onload=hashTriggerTab；
函数hashTriggerTab（）{
var current_hash=window.location.hash；
如果（当前_hash.substring（0,1）='#'）当前_hash=当前_hash.substring（1）；
如果（当前_散列！=''）{
var trigger=document.querySelector（'.nav tabs a[href=“#'+当前#u哈希+'”）；
if（trigger）trigger.click（）；
}
}

这样，您就可以在同一页面上链接这两个页面，如：

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



或从外部页面，如：

<a href='newpage.php#tabId'>Link From External</a>


选项卡窗格
id
是不必要的，修改
href
让我觉得很奇怪。一个更简洁的解决方案是为每个选项卡添加一个
id
：然后您可以将长选择器更改为像
$（'#'+tab）.tab（'show'）这样简单的选项
@skipp如果删除选项卡窗格ID，每个导航选项卡如何锚定到其选项卡窗格？总结一下这里发生的情况：
.tab（'show'）
正在导航选项卡的
上调用
我尝试了该解决方案，但它对我无效。我用的是导航药片而不是导航标签。这是我试过的，有人能帮我吗？我在我的应用程序中使用angularJs，所以可能是更简单的解决方案？没关系，通过组合此线程中的几个解决方案，使其工作。id必须位于引号之间：
$（'.nav tabs a[href=“#'+url.split（'.''.'.'.''.'[1]+''']）。tab（'show'）
location.hash

有什么问题吗？@Alnitak是的，我不明白你为什么需要更新页面-reload@alias51这样，您就可以将包含哈希的URL添加到书签中，并在访问时自动打开正确的选项卡。您肯定不会建议这样做。这是他/她要求的一种非常糟糕的做法。或者，如果您使用HREF

$（'.nav tabs a[HREF=“#home”]'）。tab（'show'）

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;
    }); 
} 

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

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

    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');
    }

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