当某些链接相同时，当前所选项目

Current selected item when some links are the same

本文关键字：选项 项目 链接      更新时间：2023-09-26

我正试图创建一个堆叠导航列表，突出显示您选择的项目。它看起来像这样。

<div class="page-list">
    <ul class="nav nav-pills nav-stacked">
      <li><a href="Page1.html" > Page1 </a></li>
      <li><a href="Page2.html" > Page2 </a></li>
      <li><a href="Page3.html" > Page3 </a></li>
      <li><a href="Page4.html" > Page4 </a></li>
      <li><a href="Page5.html" > Page5 </a></li>
      <li><a href="Unavailable.html" > Page6 </a></li>
      <li><a href="Unavailable.html" > Page7 </a></li>
    </ul>
</div>

我遇到的问题是，最后两个页面共享同一个链接，我似乎无法在列表中突出显示所选页面。

我把它用于我的JavaScript。

<script>
    $(function(){
        $('a').each(function() {
            if ($(this).prop('href') == window.location.href) {
                $(this).addClass('current');
            }
        });
    });
</script>

但这会导致指向同一页面的所有链接高亮显示。

我试着用这个来解决它，但现在点击时没有链接高亮显示。

<script>
    $(".page-list a").click(function() {
        $(this).parent().previoussibling().find('a').removeClass('current');
        $(this).addClass("current");
    });
</script>

解决此问题的一种方法是创建一个查询字符串来指示应该突出显示哪个链接。

...
<li><a href="Unavailable.html?page=6" > Page6 </a></li>
<li><a href="Unavailable.html?page=7" > Page7 </a></li>
...

然后在Javascript中，读取查询字符串并决定突出显示哪个页面。这个StackOverflow问题可以帮助您读取查询字符串。

如果你不想让用户看到www.yourwebsite.com/Unavailable.html?page=7，你也可以通过使用cookie来实现这一点。有关在JavaScript中使用cookie的信息，请参阅本教程。如果你喜欢使用cookie，有很多库可以帮助你。

无论您选择哪种方式将信息传递到下一页，都需要在a标签中添加id（或以其他方式唯一标识每个链接），以便突出显示相应的链接。

下面是一个使用查询字符串思想的示例：

<div class="page-list">
    <ul class="nav nav-pills nav-stacked">
        ...
        <li><a id="6" href="Unavailable.html?page=6" > Page6 </a></li>
        <li><a id="7" href="Unavailable.html?page=7" > Page7 </a></li>
    </ul>
</div>
<script>
    $(function(){
        $('a').each(function() {
            if ($(this).attr('id') == getParameterByName('page')) {
                $(this).addClass('current');
            }
        });
    });
    function getParameterByName(name) {
        //this code is taken directly from https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript#answer-901144
        name = name.replace(/['[]/, "''[").replace(/[']]/, "'']");
        var regex = new RegExp("[''?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/'+/g, " "));
    }
</script>
相关文章：