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导航栏的更多相关文章

  1. [JQuery代码]超酷鼠标滑过背景高亮效果

    1.效果及功能说明 鼠标滑过悬停特效,div css制作产品列表图片布局通过鼠标滑过产品图片背景高亮闪烁显示,产品标题滑动显示或隐藏 2.实现原理 首先定义好一个重复实现效果的方法,然后定义光带出现速 ...

  2. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  3. 用jquery制作一个简单的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 用jq实现鼠标移入按钮背景渐变其他的背景效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. ASP.NET TextBox 当鼠标点击后清空默认提示文字

    ASP.NET TextBox 当鼠标点击后清空默认提示文字 [ 方法一] 前台代码: <div>    <asp:TextBox ID="txtName" ru ...

  6. jQuery自定义Web页面鼠标右键菜单

    jQuery自定义Web页面鼠标右键菜单 右键菜单是固定的,很多时候,我们需要自定义web页面自定义菜单,指定相应的功能. 自定义的原理是:jQuery封装了鼠标右键的点击事件(“contextmen ...

  7. 如何用jQuery实现div随鼠标移动而移动(详解)?----2017-05-12

    重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...

  8. Jquery地图热点效果-鼠标经过弹出提示信息

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  9. 雷林鹏分享:jQuery EasyUI 数据网格 - 条件设置行背景颜色

    jQuery EasyUI 数据网格 - 条件设置行背景颜色 本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...

随机推荐

  1. JavaScript插件 Bootstrap自带了13个jQuery插件,这些插件为Bootstrap中的组件赋予了“生命”

    原文:http://v2.bootcss.com/javascript.html#popovers

  2. RHEL 7.0 修改防火墙配置

    RHEL 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙. 关闭firewall: systemctl stop firewalld.service #停止firewal ...

  3. Keil C51.uew

    /L15"Keil C51" Line Comment = // Block Comment On = /* Block Comment Off = */ Escape Char ...

  4. shell字符串

    字符串是shell编程中最常用最有用的数据类型(除了数字和字符串,也没啥其它类型好用了),字符串可以用单引号,也可以用双引号,也可以不用引号.单双引号的区别跟PHP类似. 单引号 str='this ...

  5. codecomb 2091【路径数量】

    好久没有更新博客了啊……屯了一堆题没发呢 这是丧心病狂的hzwer每日NOI模拟赛第一天的第一题 妈蛋说好的NOIP难度图论算法两题网络流!让我说什么好 唔……codecomb的页面在晚上就会变得很奇 ...

  6. 百度地图LV1.5实践项目开发工具类bmap.util.jsV1.1

    /** * 百度地图使用工具类-v1.5 * * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @email b ...

  7. iOS SDK原生JSON解析

    - (IBAction)touchReadButton:(id)sender { NSData *jsonData = [[NSData alloc] initWithContentsOfFile:J ...

  8. Android学习总结——适配器

    适配器是AdapterView视图(如ListView - 列表视图控件.Gallery - 缩略图浏览器控件.GridView - 网格控件.Spinner - 下拉列表控件.AutoComplet ...

  9. Change the ball(找规律)

    Change the ball Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  10. java学习笔记day01

    1.Java JDK:简称为java开发工具集 2.下载JDK后安装,可以下载绿色版本,即不用安装,直接将其放在磁盘根目录  如:C:\Java\jdk1.6.0_10 3.在任意磁盘路径下都可以编译 ...