Question

我有以下HTML结构：

<div>
    <ul id="Category" class="row list-inline">                
        <li>
            <a href="/products/Category/Cars">
                Cars
            </a>
        </li>
        <li>
            <a href="/products/Category/Cars%20Racer">
                Cars MVC
            </a>
        </li>
        <li>
            <a href="/products/Category/Bikes">
                Bikes
            </a>
        </li>
        <li>
            <a href="/products/Category/Rollers">
                Rollers
            </a>
        </li>                
        <li>
            <a href="/products/Category/Scooters">
                Scooters
            </a>
        </li>
    </ul>
</div>

单击超链接导航到相应的页面（回发）。我想更改点击链接的背景颜色。

我为此编写了以下脚本：

$("#Category li").click(function () {
    $("#Category li > a").each(function () {
        $(this).removeClass("selectedan")
    });
    $(this).addClass("selectedan");
});

但没有效果。什么似乎是错的？

Answer 1

这里有我如何处理它给出您给我们的代码邮件，并知道您的整个页面都会刷新：

＆＃13;

$(document).ready(function() {
  $("#Category li > a").each(function () {
    if ($(this).attr('href') === window.location.pathname.replace(/\/$/, '')) {
      $(this).addClass("selectedan");
    }
  });
});

＆＃13;

<div>
    <ul id="Category" class="row list-inline">                
        <li>
            <a href="/products/Category/Cars">
                Cars
            </a>
        </li>
        <li>
            <a href="/products/Category/Cars%20Racer">
                Cars MVC
            </a>
        </li>
        <li>
            <a href="/products/Category/Bikes">
                Bikes
            </a>
        </li>
        <li>
            <a href="/products/Category/Rollers">
                Rollers
            </a>
        </li>                
        <li>
            <a href="/products/Category/Scooters">
                Scooters
            </a>
        </li>
    </ul>
</div>

＆＃13;

不能保证上述内容能够正常运行，但您需要执行以下操作：

在页面加载时，遍历每个导航锚
检查路径名是否与href匹配
- 如果匹配，请添加课程
- 如果他们不做，就什么都不做

Answer 2

试试这个

$("#Category li").click(function () {
    $("a .selectedan").removeClass("selectedan");
    $(this).addClass("selectedan");
});

Answer 3

如果您希望菜单点在导航后具有背景颜色，只需将一个名为active的CSS类（或类似的东西）添加到特定的菜单点。在CSS中，您可以为a - 标记设置样式，并使用active - 类。

.active {
    background-color: orange;
}

请参阅Fiddle，我将class="active"添加到自行车链接。

现在，在将active类添加到菜单点时，您有两种可能性：

手动将课程active添加到每个菜单点，将菜单复制/粘贴到每个页面，并且存在犯错的风险
使用以下代码：

$(function(){
       var url = window.location.pathname, 
       urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash    if present as it could collide with the link in navigation in case    trailing slash wasn't present there
       // now grab every link from the navigation
       $('#category li a').each(function(){
          // and test its normalized href against the url pathname regexp
          if(urlRegExp.test(this.href.replace(/\/$/,''))){
              $(this).addClass('active');
          }
       });    });

从source编辑。它可能无法在您的项目中100％工作，因此您可以对其进行调整以使其正常工作。

在导航中创建活动菜单点

3 个答案: