javascript - 用户单击网络链接时如何更改菜单栏的颜色

Question

我想要哟当用户点击其他导航按钮时更改中殿的颜色我不知道我怎么能通过代码做到这一点这是下面的图片：在此处输入图像描述

当用户单击 abut 时，该颜色应变为橙色，主页活动橙色将变为黑色，而 about 将变为橙色。我想通过 JavaScript 做到这一点。这是下面的代码行。

<div class="container clearfix">
          <nav id="menu" class="navigation" 
           role="navigation" style="float: left">
          <a href="#">Show navigation</a>
          <ul id="nav">
            <li class="active"><a href="Default.aspx">Home</a></li>
            <li><a href="About.aspx">About</a></li>
            <li><a href="TP.aspx">T-P</a></li>
            <li><a href="MP.aspx">M-P</a></li>
            <li><a href="BM.aspx">B-M</a></li>
            <li><a href="RB.aspx">R-B</a></li>
            <li><a href="LC.aspx">L-C</a></li>
          </ul>         
         </nav>
  </div>

我使用这个 JavaScript 来改变它。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
 jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
var make_button_active = function()
{
  //Get item siblings
  var siblings =($(this).siblings());
  //Remove active class on all buttons
  siblings.each(function (index)
    {
      $(this).removeClass('active');
    }  )
  //Add the clicked button class
  $(this).addClass('active');}
  //Attach events to menu
  $(document).ready(
  function()
  {
    $(".menu li").click(make_button_active);
  }  )
</script>

但什么也没发生，请让我知道我该怎么做。有人有什么想法吗？

谢谢你

score 0 · Accepted Answer

这里有很多问题。对于一个菜单是 id 的值，因此您需要在 jquery 中使用 $('#menu") 引用它。下面是您的代码的工作版本。我必须删除 href 属性以实现所需的样式更改最小的努力。您现在有两个选择：

使用此代码并使用 javascript 和 css display 属性动态交换内容

在您站点的每个页面上修改标记，以设置活动导航项；使用这种方法，不需要 javascript。

<htmL>
<head>
<script type="text/javascript">
   var make_button_active = function(){
     //Get item siblings
     var siblings =($(this).siblings());
     //Remove active class on all buttons
     siblings.each(function (index){
       $(this).removeClass('active');
     });
     //Add the clicked button class
    $(this).addClass('active');
   }
   //Attach events to menu
   $(document).ready(function(){
     $("li").click(make_button_active);
   });

</script>
<style>
  .active{
  background-color: red;
}
</style>
</head>
<body>
  <div class="container clearfix">
  <nav id="menu" class="navigation" 
   role="navigation" style="float: left">
  <a href="#">Show navigation</a>
  <ul id="nav">
    <li class="active"><a>Home</a></li>
    <li><a >About</a></li>
    <li><a >T-P</a></li>
    <li><a >M-P</a></li>
    <li><a >B-M</a></li>
    <li><a >R-B</a></li>
    <li><a >L-C</a></li>
  </ul>         
 </nav>
</div>
</body>
</html>

score 0 · Accepted Answer

嗨，更简单的方法来在 li 上课

string thisURL = this.Page.GetType().Name.ToString();       
        switch (thisURL)
        {
            case "home_aspx":
                lihome.Attributes.Add("class", "Active");                
                break;
         case "support_aspx":
                lisupport.Attributes.Add("class", "Active");
                break;
         case "logout_aspx":
                lilogout.Attributes.Add("class", "Active");
                break;
         }

需要在页面的加载事件上执行此代码，它将为该解决方案投票=）

javascript - 用户单击网络链接时如何更改菜单栏的颜色

2 回答 2

Related

Reference