jquery实现导航栏鼠标点击后实行背景高亮,点击离开恢复(超级简单!!!!),jquery导航栏

1、header部分要引入Jquery

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
     <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
     <style type="text/css">
         li:hover, .red{
             background: red;
         }
         ul li{ width:200px; height:30px; display:block; border:1px solid #ccc;}
    </style>
</asp:Content>

2、body部分

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
 

  <div class="dianji">
      <ul>
          <li>div1</li>
          <li class="red">div2</li>
          <li>div3</li>
          <li>div4</li>
          <li>div5</li>
      </ul>
  </div>

  //必须要添加的JS   方法一
  <script type="text/javascript">
      $(document).ready(function () {
          $(".dianji li").click(function () {
              $(this).addClass("red").siblings().removeClass("red");
          })
      });
  </script>

  //方法二

   <script type="text/javascript">
      $(function () {
        $(".dianji a").click(function () {
          $(this).parent("li").addClass('red').siblings().removeClass("red");
        });
      });
   </script>



</asp:Content>

 

你可能感兴趣的:(jquery实现导航栏鼠标点击后实行背景高亮,点击离开恢复(超级简单!!!!),jquery导航栏)