Jquery - 如何向菜单链接添加不同的类/颜色

Question

我有一个菜单列表，我想要每个 <li>它们中的一部分在“事件”时具有不同的背景颜色

<ul>
  <li> // this <li> should have blue background when active
    <a href="#">Link 1</a>
  </li>
  <li> // this <li> should have red background when active
    <a href="#">Link 2</a>
  </li>
  <li> // this <li> should have yellow background when active
    <a href="#">Link 3</a>
  </li>
  <li> // this <li> should have green background when active
    <a href="#">Link 4</a> 
  </li>
  <li> // this <li> should have orange background when active
    <a href="#">Link 5</a>
  </li>
</ul>

那么，我最好的方法是什么？

Answer 1

这里是一个快速代码，可以帮助您理解它是如何工作的。您可以使用类来触发事件，或者您的意思是悬停。如果您不希望悬停越过事件，请在 CSS 内更改悬停在事件上方的位置。

<style type="text/css">
    #main_menu {list-style-type: none;} /* ul */
    #main_menu li {width: 100px; padding: 5px;}
    #main_menu li a {display: block; color: black; text-decoration: none;}

    /* Active static via the core program (PHP, CMS) */
    #main_menu li.active {background: black;}
    #main_menu li.active a {color: white;}

    /* Hover */
    #main_menu li:hover {background: blue;}
    #main_menu li:hover a {color: yellow;}

    /* Dynamic active */
    #main_menu li:active {background: green;}
    #main_menu li:active a {color: red;}
</style>
<ul id="main_menu">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<script type="text/javascript">
    $('#main_menu li a').click(function () {
        $(this).parent('li').toggleClass('active');
        return false; // Kills the link action
    });
</script>

^{[ View output ]}

现在我们知道这个系统是如何工作的了。我们可以添加您的自定义颜色:

<style type="text/css"> 
    #main_menu {list-style-type: none;} /* ul */
    #main_menu li {width: 100px; padding: 5px;}
    #main_menu li a {display: block; color: black; text-decoration: none;}

    /* Active */

    #main_menu li.first_item.active {background: blue;}
    #main_menu li.second_item.active {background: red;}
    #main_menu li.third_item.active {background: #FFFF00;}
    #main_menu li.fourth_item.active {background: green;}
</style>
<ul id="main_menu">
    <li class="first_item active"><a href="#">Home</a></li>
    <li class="second_item"><a href="#">Gallery</a></li>
    <li class="third_item"><a href="#">About</a></li>
    <li class="fourth_item"><a href="#">Contact</a></li>
</ul>
<script type="text/javascript">
    $('#main_menu li a').click(function () {
        $(this).parent('li').toggleClass('active');
        return false; // Kills the link action
    });
</script>

^{[ View output ]}

我感觉到您希望它们具有不同的颜色，因为您有针对不同位置的重要链接。所以我也添加了 ID 的版本。因此您可以在 ID 下设置不同的样式，然后将它们用于事件状态。

<style type="text/css"> 
    #main_menu {list-style-type: none;} /* ul */
    #main_menu li {width: 100px; padding: 5px;}
    #main_menu li a {display: block; color: black; text-decoration: none;}

    /* Active */
    #main_menu li#home.active {background: blue;}
    #main_menu li#gallery.active {background: red;}
    #main_menu li#about.active {background: #FFFF00;}
    #main_menu li#contact.active {background: green;}
</style>
<ul id="main_menu">
    <li id="home" class="active"><a href="#">Home</a></li>
    <li id="gallery"><a href="#">Gallery</a></li>
    <li id="about"><a href="#">About</a></li>
    <li id="contact"><a href="#">Contact</a></li>
</ul>
<script type="text/javascript">
    $('#main_menu li a').click(function () {
        $(this).parent('li').toggleClass('active');
        return false; // Kills the link action
    });
</script>

^{[ View output ]}

对于跨浏览器的问题，我不会使用nth-child(2) 方法。但是，您可以做的是将 id="" 添加到那些 li 元素中。因此在 jquery 中您可以更好地使用它们，并且您可以从 css 中提取颜色 :)