Question

我希望John的标签在使用课程时处于活动状态＆＃34;有效＆＃34;页面加载时但是，如果网址以特定的主题标签结尾（在本例中为#cindy），我希望Cindy的标签在页面加载时激活（例如：＆＃39; www.index.html＃cindy＆＃39; ）。

到目前为止，我已经获得了激活John标签的页面，但我不知道从哪里开始根据网址转到Cindy的标签页。

任何帮助将不胜感激。

CSS

#main-container .onPage.active {
    display: block;
}
#main-container .onPage {
    display: none;
}

HTML

<div id="main-container">
    <div class="box">
        <div class="btnList" id="tabs">
            <ul>
                <li>
                    <a class="tab linkSection" href="#james"><span>James</span></a>
                </li>
                <li>
                    <a class="tab linkSection" href="#cindy"><span>Cindy</span></a>
                </li>
            </ul>
        </div>
        <div class="onPage" id="james">
            <div>
                <h1 class="icon"><span class="b"></span>Meet James</h1><br>
            </div>
        </div>
        <div class="onPage" id="cindy">
            <div>
                <h1 class="icon"><span class="b"></span>Meet Cindy</h1><br>
            </div>
        </div>
    </div>
</div>

JS

$(document).ready(function() {
    $("div#james.onPage").addClass("active");
});

Answer 1

您可以使用window.location.hash从网址获取哈希值。

$(document).ready(function() {
    var hash = window.location.hash;
    if($("div" + hash + ".onPage").length > 0) {
        $("div" + hash + ".onPage").first().addClass("active");
    } else {
        $("div#james.onPage").addClass("active");
    }
});

Answer 2

从网址获取哈希并检查它是否为空白，并决定从哪个激活。

$(document).ready(function() {
    var hash = window.location.hash;
    if(hash) {
        $("div" + hash + ".onPage").addClass("active");
    } else {
        $("div#james.onPage").addClass("active");
    }
});

如何根据URL从默认选项卡中删除活动类到另一个选项卡？

2 个答案: