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 到 JQuery (1)学习小结
Feb 12 Javascript
jQuery select的操作实现代码
May 06 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 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脚本
2006/11/26 PHP
php中的MVC模式运用技巧
2007/05/03 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
家长会邀请书
2014/01/25 职场文书
小小的船教学反思
2014/02/21 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
食品安全主题班会
2015/08/13 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技