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 相关文章推荐
javascript使用定时函数实现跳转到某个页面
Dec 25 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
canvas时钟效果
Feb 16 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
vue-cli3+typescript初体验小结
Feb 28 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
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实现的pdo公共类定义与用法示例
2017/07/19 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
Python中删除文件的程序代码
2011/03/13 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
Python数组并集交集补集代码实例
2020/02/18 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
Python日志处理模块logging用法解析
2020/05/19 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
浅谈html5 响应式布局
2014/12/24 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
Java程序员面试90题
2013/10/19 面试题
学习“七一”讲话精神体会
2014/07/08 职场文书
交通安全横幅标语
2014/10/07 职场文书
2014年社区工作总结
2014/11/18 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
电影圆明园观后感
2015/06/03 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python