Question

我的网站上的网页中有一个导航菜单，其中应用了javascript以突出显示当前所选链接。

问题是我在我的主页上有相同的菜单，当我点击主页上的链接时，它会转到预期的部分，但它最初不会突出显示相应的链接。

例如，在主页上有一个带有链接[1,2,3,4,5,6]的导航菜单。现在在网站的“写作”页面上，还有相同的导航链接{1,2,3等..]“写作”页面上的链接已应用javascript，因此当点击链接时，它将突出显示选定的链接。但是当我从主页点击链接1时，它将转到“写入”页面上的链接1，但链接不会突出显示。我必须单击另一个链接，然后返回到它以突出显示它。

以下是“撰写”页面中用于导航菜单的编码：

<div id="article-nav-container">

        <ul id="article-nav-pg">
            <li><a href="articles.php?article=article_name1#articles-top">1</a></li>
            <li><a href="articles.php?article=article_name2#articles-top">2</a></li>
            <li><a href="articles.php?article=article_name3#articles-top">3</a></li>
            <li><a href="articles.php?article=article_name4#articles-top">4</a></li>
            <li><a href="articles.php?article=article_name5#articles-top">5</a></li>
            <li><a href="articles.php?article=article_name6#articles-top">6</a></li>
        </ul>

        <script type="text/javascript">
                $(document).ready(function() {
            var loc = window.location.href; // The URL of the page we're looking at
            $('#article-nav-pg a').each(function() {
                if (loc.indexOf(this.href) !== -1) { // If the URL contains the href of the anchor
                        $(this).addClass('selected'); // Mark it as selected
                }
            });
        });
        </script>

    </div><!-- end articles nav -->

主页导航（无javascript）的编码是：

<ul id="article-nav">
        <li><a href="articles.php?article=article_name1">1</a></li>
        <li><a href="articles.php?article=article_name2">2</a></li>
        <li><a href="articles.php?article=article_name3">3</a></li>
        <li><a href="articles.php?article=article_name4">4</a></li>
        <li><a href="articles.php?article=article_name5">5</a></li>
        <li><a href="articles.php?article=article_name6">6</a></li>
    </ul>

我很感激有关如何将javascript效果链接到主页导航菜单的任何帮助，以便在单击链接时，相应的页面将加载所选的链接。使用现有的javascript或任何其他技术。希望这不会太混乱。

以下是该网站的链接：here

谢谢，

gdinari

Answer 1

主页上的链接如下所示：articles.php?article=article_name4。

主页上的链接如下所示：articles.php?article=article_name4#articles-top

当您单击第一个链接时，它会检查后一个URL是否是以前URL的子字符串。它不是，所以没有选择。

＃articles-top实际上是否真的有必要？

Answer 2

在这一行中，“this”未解析为锚定，

if (loc.indexOf(this.href) !== -1) { // If the URL contains the href of the anchor

以下作品，

if (loc.indexOf($(this).attr('href')) !== -1) { // If the URL contains the href of the anchor

Javascript在页面加载时激活

2 个答案: