Twitter Bootstrap 选项卡：打开特定选项卡答案

【问题标题】：Twitter Bootstrap Tabs: Open Specific TabTwitter Bootstrap 选项卡：打开特定选项卡
【发布时间】：2016-10-06 16:34:46
【问题描述】：

我有以下代码，可以很好地用作选项卡 - 但是，如果我访问 www.mysite.com/#female，我希望女性选项卡变为活动状态并在女性选项卡窗格中显示内容。

我如何实现这一目标？如您所见，我已尝试使用我的代码，但失败了。

演示： https://jsfiddle.net/2yocpy2k/

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <meta content="noindex, nofollow" name="robots">
    <meta content="noindex, nofollow" name="googlebot">
    <base href="https://fiddle.jshell.net/2yocpy2k/show/light/">
    <script src="//code.jquery.com/jquery-compat-git.js" type=
    "text/javascript">
    </script>
    <link href="/css/normalize.css" rel="stylesheet" type="text/css">
    <link href="/css/result-light.css" rel="stylesheet" type="text/css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"
    type="text/javascript">
    </script>
    <link href=
    "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel=
    "stylesheet" type="text/css">
    <style type="text/css">
    /* Latest compiled and minified CSS included as External Resource*/

    /* Optional theme */
    @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

    body {
    margin: 10px;
    }
    </style>
    <title>Bootstrap 3 Template</title>
    <script type='text/javascript'>
    //<![CDATA[
    $(window).on('load', function() {
    /* Latest compiled and minified JavaScript included as External Resource */

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

    // Change hash for page-reload
    $('.nav-tabs li h2 a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
    })
    });//]]> 

    </script>
</head>
<body>
    <div class="container">
        <p>Hello</p>
        <p>and</p>
        <p>Welcome!</p>
        <ul class="nav nav-tabs" id="myTab">
            <li>
                <h2><a data-target="#female" data-toggle="tab">Female</a></h2>
            </li>
            <li>
                <h2><a data-target="#male" data-toggle="tab">Male</a></h2>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane" id="female">
                Open Female
            </div>
            <div class="tab-pane" id="male">
                Open Male
            </div>
        </div>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p></p>
    </div>
</body>
</html>

【问题讨论】：

*.com/questions/15678511/… 有什么帮助吗？

标签： javascript jquery css twitter-bootstrap tabs

【解决方案1】：

当页面加载时存在哈希时，您可以创建一个添加活动类的函数。将它包含在您的顶部脚本部分中，如下所示：

$(function () {
    var hashTab = window.location.hash;
    if (hashTab != '') {
        $('.nav-tabs a[href="' + hashTab + '"]').tab('show');
        $(hashTab).addClass('active');
    }
});

【讨论】：

感谢您的回复 - 但是，当我尝试此操作时，我收到 jquery-git.js:1586 Uncaught Error: Syntax error, unrecognized expression: .nav-tabs a[href=#female] 错误。
将其更改为 $('.nav-tabs a[href="' + hashTab + '"]').tab('show'); 解决了这个问题:-)
最后一个问题 - 我如何将li 设置为有一个活跃的班级。尽管显示了正确的选项卡窗格，但目前它并没有这样做:)
我认为类似 $('.nav-tabs a[href="' + hashTab + '"]').parent().addClass('active');应该工作。
我已经尝试过了，但不幸的是它没有用。控制台中也没有错误:(