Question

我有以下代码作为标签很有效 - 但是，如果我访问 www.mysite.com/#female 我会喜欢它，“女性”标签变为活动状态并在“女性”标签窗格中显示内容

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

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

Answer 1

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

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

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

1 个答案: