Question

有许多教程向您展示如何通过从网址中提取＃来在导航栏中创建活动标签效果。

如果您要链接到同一页面，这很棒，但如果您的所有链接都在不同的页面上，那该怎么办呢？有没有办法使用Jquery来获取网址并使标签处于活动状态？

以下示例为特定选项卡提供了一个“活动”类：

var tabs = $('ul.tabs');

    tabs.each(function(i) {
        //Get all tabs
        var tab = $(this).find('> li > a');
        tab.click(function(e) {

            //Get Location of tab's content
            var contentLocation = $(this).attr('href') + "Tab";

            //Let go if not a hashed one
            if(contentLocation.charAt(0)=="#") {

                e.preventDefault();

                //Make Tab Active
                tab.removeClass('active');
                $(this).addClass('active');

                //Show Tab Content & add active class
                $(contentLocation).show().addClass('active').siblings().hide().removeClass('active');

            } 
        });

如何修改此功能以使用指向我网站中其他网页的链接？这是html：

<ul id="nav"  class="tabs">
    <li><a href="/" title="Home" class="active">Home</a></li>   
    <li><a href="/about/" title="About us">About</a></li>
    <li><a href="/demo/" title="Demo">Demo</a></li>
    <li><a href="/where/" class="dir" title="Where">Where</a></li>
    <li><a href="/contact/" class="dir" title="Contact Us">Contact Us</a></li>
</ul>

以上jquery仅适用于＃tab1，＃tab2等，如何根据当前页面名称激活选项卡？对不起，如果有点不清楚，很难解释！

Answer 1

location.href

将返回当前页面的URL，因此您可以将if语句更改为 -

if (location.href.indexOf(contentLocation) != -1) {

将检查点击的href的链接是否包含在当前页面的URL中。你显然必须改变这种逻辑以适应你自己的需要。

Answer 2

在页面加载时，您可以检查'window.location'对象以显示正在显示的页面，然后将'active'类设置为相应的链接：

$(document).ready(function () {
    //iterate through your links and see if they are found in the window.location.pathname string
    var loc_href = window.location.pathname;
    $('#nav a').each(function () {
        if (loc_href == $(this).attr('href')) {
            $(this).addClass('active');
        }
    });
});

注意：loc == $（this）.attr（'href'）行查看链接的href值是否与window.location.pathname字符串完全匹配。

如何根据我所在的页面在Jquery中创建活动制表符效果？

2 个答案: