jQuery+css实现非常漂亮的水平导航菜单效果


Posted in Javascript onJuly 27, 2016

本文实例讲述了jQuery+css实现非常漂亮的水平导航菜单效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery+css实现非常漂亮的水平导航菜单效果

用到的背景图片tab.gif如下:

jQuery+css实现非常漂亮的水平导航菜单效果

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery+css水平导航菜单</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  $("ul>li").click(function() {
    $("ul>li").each(function() { $(this).removeClass("_lishow"); });
    $(this).addClass("_lishow");
  });
});
</script>
<style type="text/css">
ul
{
  list-style-type: none;
  border: 0px blue solid;
  height: 27px;
  width: 480px;
}
ul li
{
  list-style-type: none;
  float: left;
  width: 74px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  background-color: #CCCCFF;
  background: url(../images/tab.gif);
  background-position: -74px 0px;
}
ul li:hover
{
  cursor: pointer;
}
._lishow
{
  background: url(../images/tab.gif);
  background-position: 0px 0px;
}
</style>
</head>
<body>
  <div>
    <ul>
      <li class="_lishow">Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>Menu4</li>
      <li>Menu5</li>
      <li>Menu6</li>
    </ul>
    <br />
  </div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
一分钟理解js闭包
May 04 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
深入理解angularjs过滤器
May 25 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 #Javascript
AngularJS 指令详细介绍
Jul 27 #Javascript
js中遍历Map对象的方法
Jul 27 #Javascript
angular.js分页代码的实例
Jul 27 #Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 #Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 #Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 #Javascript
You might like
php分页代码学习示例分享
2014/02/20 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
python 中文字符串的处理实现代码
2009/10/25 Python
python和bash统计CPU利用率的方法
2015/07/10 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
Python @property使用方法解析
2019/09/17 Python
python开发一款翻译工具
2020/10/10 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
校园创业策划书
2014/01/14 职场文书
全国道德模范事迹
2014/02/01 职场文书
大二学习计划书范文
2014/04/27 职场文书
银行业务授权委托书
2014/10/10 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
2015年党小组工作总结
2015/05/26 职场文书
中秋节晚会开场白
2015/05/29 职场文书
付款证明格式范文
2015/06/19 职场文书
七年级数学教学反思
2016/02/17 职场文书
技术入股合作协议书
2016/03/21 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
一文简单了解MySQL前缀索引
2022/04/03 MySQL
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL