Question

我有一个从一个页面导航到另一个页面的链接列表。所选链接会短暂更改颜色（变为红色），然后返回默认颜色。我已经阅读了很多关于这个问题的消息，但我的解决方案都没有。

php文件：

<div class="navBar">
        <a href="index.php">Home</a>     <a href="about.php">About</a>     <a href="galleries.php">Gallery</a>     <a href="equipment.php">Equipment</a>     <a href="links.php">Links</a>     <a href="contact.php">Contact</a>
    </div>

   <script>
        $(document).ready(function()
            {
                alert('in navBar');
                /*$('.aNavBar').click(function(event)
                    {

                    };*/

                $('.navBar a').click(function ()
                    {
                        alert("in click function");
                        $('.navBar a.selected').removeClass('selected');
                        $(this).addClass('selected');
                        $('.navBar a.lastclicked').removeClass('lastclicked');
                        $(this).addClass('lastclicked');
                    });
            });
    </script>

css文件：

.navBar
{
    background: white;
    border: 0;
    font-size: 20px;
    height: 10%;
    margin: 0;
    padding: 0;
    text-align: center;
    white-space: pre;
    width: 100%;
}

.navBar.selected
{
    color: red;
}

.navBar a.lastclicked
{
    color: red;
}

.navBar a.selected
{
    color: red;
}

如你所见，我试图使用'selected'和'lastclicked'。

Answer 1

添加/删除类无关紧要，因为当用户从一个页面导航到另一个页面时，它会丢失。

一个选项是使用正则表达式确定正在从URL查看的页面：

var href = 'http://www.example.com/test/pagename/';
//href = location.href;
var page = href.match(/^.*?\/([^\/]*)\/*$/)[1];
// This will give you 'pagename'

href = 'http://www.example.com/test/index.php';
page = href.match(/^.*?\/([^\/]*)\/*$/)[1];
// This will give you index.php

从那里你可以做类似的事情：

 $.each($('.navBar a'), function(i,e){
    if($(e).attr('href') === page){
        $(e).addClass('selected');
    }
  })

确定正在查看的网页是否与任何href匹配，如果是，请添加所选类。

但这并非没有缺点：

例如，如果htaccess删除了文件扩展名，则该网址会显示index，而href会说index.php，因此无法匹配。
如果网址类似于http://www.example.com/，则会返回www.example.com

需要做更多的工作才能解决这个问题。

希望它有所帮助！

Here is a jsFiddle显示了行动中的概念。

jQuery选择的链接文本颜色不会永久更改

1 个答案: