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

2019-11-20 09:24:23

字体：大中小

来源：转载

供稿：网友

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

运行效果截图如下：

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

具体代码如下：

<!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相关内容感兴趣的读者可查看本站专题：《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

上一篇：详解Angular开发中的登陆与身份验证

下一篇：jQuery+CSS实现简单切换菜单示例