Question

道歉，如果标题具有误导性，希望我能在这里解释一下......

基本上，为了简化它..我有一个产品页面，我们称之为“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>

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

利

Answer 1

您可以将源附加到网址本身，以便以?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>

最初它有我们的两个链接：Fruit和Popular Brands。接下来是一个帮助我们在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函数找不到，我们只会假设它是“Fruit”：

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 );
}

您可以通过查看以下网址在线查看：

Answer 2

您可以使用脚本语言根据网址中传递的参数显示不同的内容，例如?from=fruit或?from=popular_brand，例如上面的示例。

显示不同的导航链接，具体取决于您导航的页面

2 个答案: