1

抱歉,如果标题具有误导性,希望我能在这里解释一下自己。

基本上,为了简化它.. 我有一个产品页面,我们将其称为“Apple”

“Apple”是两种方式之一,或者来自页面“水果”或来自页面“流行品牌”

现在,在“Apple”页面的顶部,我有一组导航链接..类似于这个..

首页 - 分类 - 水果 - 联系方式

现在,如果您从“水果”页面到达“Apple”,这一切都很好,但是,就目前而言,如果您从“流行品牌”页面到达,您仍然会看到相同的导航链接。

我希望它显示在哪里..

首页 - 分类 - 热门品牌 - 联系方式

所以我的问题是,

如何根据您最初来自的页面更改链接,而不会为任何一种情况制作重复页面。

代码没什么特别的,只是基本链接..

<ul>

<li> <a href="index.html">Home</a></li>

<li> <a href="categories.html">Categories</a></li>

<li> <a href="fruit.html">Fruit</a></li>

<li class="current_page_item"><a href="fruit.html">Fruit</a></li>

<li> <a href="Contact.html">Contact</a></li>

</ul>

希望我已经清楚地解释了自己,并感谢任何帮助。

4

2 回答 2

1

您可以将源附加到 url 本身,以便它以?source=fruit或什至结尾?source=popular%20brand。搜索此source变量,并隐藏两个链接之一作为响应。

假设这是您的 HTML:

<nav id="nav">
    <a href="#">Home</a> 
    <a href="#">Categories</a> 
    <a href="#" data-toggle>Fruit</a> 
    <a href="#" data-toggle>Popular Brand</a> 
    <a href="#">Contact</a>
</nav>

最初它包含我们的两个链接:水果和流行品牌。接下来是一个帮助我们查找值的函数document.location.search

function getParam ( p ) {
    var search = decodeURIComponent( document.location.search );
    var val, exp = new RegExp( "[?&]" + p + "=([^&]+)" );
    return ( val = search.match( exp ) ) ? val[1] : false;
}

这通过传入一个名称来工作,并返回相应的值或false. 接下来,我们将获取或提供 的值source。如果我们的getParam函数找不到,我们将简单地假设它是“水果”:

var source = getParam( "source" ) || "Fruit";

现在我们收集对导航区域中所有链接的引用:

var links = document.getElementById("nav").getElementsByTagName("a"), 
    count = links.length, a;

在这一点上,我们循环遍历a元素的集合。如果它们具有该data-toggle属性,我们将检查它们的文本是否与源文本匹配。如果没有,我们将其隐藏。这意味着?source=fruit将隐藏热门品牌链接,?source=popular%20brand并将隐藏水果链接。

while ( a = links[ --count ] ) {
    if ( a.hasAttribute("data-toggle") )
        if ( (a.textContent || a.innerText).toLowerCase() !== source.toLowerCase() )
            a.parentElement.removeChild( a );
}

您可以通过查看以下 URL 在线查看此内容:

于 2013-04-09T14:13:13.473 回答
0

您使用脚本语言根据 url 中传递的参数显示不同的内容,例如?from=fruit?from=popular_brand按照上面的示例。

于 2013-04-09T13:07:25.197 回答