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

时间:2024-01-04 21:18:50

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>