Question

我遇到了一个我不知道如何解决的问题，我真的很感激任何有关这方面的帮助。好的，所以我有我的顶级导航，每当我点击导航中的这个特定链接时，产品会链接到带有子菜单的页面，其中有四个其他链接位于顶部导航下方。现在我正试图建立这个链接＆＃39;产品＆＃39;还有链接＆＃39;项目＆＃39;这是一个子菜单链接，一旦我点击产品链接就转到同一页面 - 项目页面应该显示两个产品和项目链接设置为活动。这两个链接都应该导致一个页面。有人可以帮我解决这个问题吗？我只是在这里感到困惑。我不知道该怎么做。

Fiddle Demo - 一个非常简单的导航大纲。

HTML

<nav class="main-nav">
    <ul>
        <li><a href="items-page.html">products</a></li>
        <li>link 2</li>
        <li>link 3</li>
        <li>link 4</li>
    </ul>
</nav>
<nav class="sub-nav">
    <ul>
        <li><a href="items-page.html">itemes</a></li>
        <li>sub link 2</li>
        <li>sub link 3</li>
        <li>sub link 4</li>
    </ul>
</nav>

CSS

nav {
    display: inline;
    width: 100%;
    height: auto;
    display: block;
}
li {
    list-style-type: none;
    display: inline;
}
nav + nav {
    border-top: 1px #000000 solid;
}

Answer 1

你可以像这样使用jQuery：

//on document ready
$(document).ready(function(){
    //chnages path-two.html to path-one.html
    $('a[href="path-two.html"]').attr("href", "path-one.html");
    // if you are on the /path-one.html
    if(location.pathname == "/path-one.html") {
        // add active class
        $('a[href="path-one.html"]').addClass('active');
    };
});

有点像这样的CSS：

/*example active css, customize to your liking*/
.active {
    color: #ff0000;
    text-decoration: none;
}

小提琴：http://jsfiddle.net/N9bwB/6/

如果我理解你的问题，那么这应该是你需要的。

这很糟糕......我假设你正在处理一个不热衷于定制的CMS？

两个指向同一页面的链接

1 个答案: