jQuery实现鼠标滑过导航栏呈现不同的样式
素材图片
源码：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 凡客诚品帮助中心页面</title>
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:12px;
}
#bodyDiv{
position:relative;
background:#FFF url("images/bg1.jpg") no-repeat;
width:1016px;
height:1176px;
margin:0 auto;
} .search{
position:absolute;
left:125px;
top:258px;
height:24px;
line-height:24px;
width:325px;
color:#999;
} .tab{
position:absolute;
left:276px;
top:397px; }
#tab_bg{
width: 700px;
height: 36px;
line-height: 36px;
cursor: pointer;
}
.tab_bg0 {
background: url(images/news_bghover.gif) 0px 0px; }
.tab_bg1 { background: url(images/news_bghover.gif) 0px -36px; }
.tab_bg2 { background: url(images/news_bghover.gif) 0px -72px; }
.tab_bg3 { background: url(images/news_bghover.gif) 0px -108px; }
.tab_bg4 { background: url(images/news_bghover.gif) 0px -144px; }
a{
color:#000;
text-decoration:none;
}
.tab_common {
width: 140px;
height: 36px;
line-height: 36px;
float: left;
text-align: left;
cursor: pointer;
text-indent: 40px;
} .tab_current {
width: 140px;
height: 36px;
line-height: 36px;
float: left;
text-align: left;
cursor: pointer;
color: #ffffff;
text-indent: 40px;
}
.tab_current a{color:#fff;} .jiejue2{
position:absolute;
left:817px;
top:750px;
}
/*nav*/
#nav{
position:absolute;
top:366px;
left:26px;
}
#nav ul{
list-style:none;
}
#nav ul li{
display:block;
width:196px;
line-height:30px;
border-bottom:1px solid #999;
}
#nav ul li div.first{
text-indent:20px;
border-bottom:1px solid #999;
}
#nav ul.second{
display:none;
} #nav ul.second li{
display:block;
width:166px;
padding-left:30px;
height:30px;
line-height:30px;
border:none;
} </style>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$(".first").click(function () {
$(".second").show();
$(this).next().hide();
})
$("#tab_bg >div").mouseover(function () {
$(this).siblings("div").attr("class","tab_common");
$(this).attr("class","tab_current");
$(this).parent().attr("class",'tab_bg'+$(this).index());
})
//下面的代码同样可以实现改变样式
// $(".tab_current,.tab_common").mouseover(function () {
// var v=$(this).children("a").text();
// switch (v){
// case "1.新用户注册":
// $(this).parent().attr('class',"tab_bg0");
// break;
// case "2.挑选商品":
// $(this).parent().attr('class',"tab_bg1");
// break;
// case "3.确认下单":
// $(this).parent().attr('class',"tab_bg2");
// break;
// case "4.订单跟踪":
// $(this).parent().attr('class',"tab_bg3");
// break;
// case "5.验货签收":
// $(this).parent().attr('class',"tab_bg4");
// break;
// }
// })
$("input[name='IsAvail']").click(function () {
if($(this).val()==0){
$(".wenti").show();
}else{
$(".wenti").hide();
}
}) })
</script>
</head>
<body>
<div id="bodyDiv">
<!-- 输入框 -->
<input type="text" value="请输入要查询的问题" name='search' class='search'/>
<!-- 左边导航 -->
<div id='nav'>
<ul>
<li>
<div class='first'>账号管理</div>
<ul class='second'>
<li>账号注册</li>
<li>找回密码</li>
<li>账户关联登录</li>
<li>账号常见问题</li>
</ul>
</li>
<li>
<div class='first'>购物指南</div>
<ul class='second'>
<li>购物指南1</li>
<li>购物指南2</li>
<li>购物指南3</li>
<li>购物指南4</li>
</ul>
</li> <li>
<div class='first'>配送方式</div>
<ul class='second'>
<li>配送方式1</li>
<li>配送方式2</li>
<li>配送方式3</li>
<li>配送方式4</li>
</ul>
</li>
<li>
<div class='first'>支付方式</div>
<ul class='second'>
<li>支付方式1</li>
<li>支付方式2</li>
<li>支付方式3</li>
<li>支付方式4</li>
</ul>
</li> </ul>
</div>
<!-- 流程 -->
<div class="tab">
<div id="tab_bg" class="tab_bg0">
<div class="tab_current">
<a name="index_gwlc_1" class="track" href="#">1.新用户注册</a>
</div>
<div class="tab_common">
<a name="index_gwlc_2" class="track" href="#">2.挑选商品</a>
</div>
<div class="tab_common">
<a name="index_gwlc_3" class="track" href="#">3.确认下单</a>
</div>
<div class="tab_common">
<a name="index_gwlc_4" class="track" href="#">4.订单跟踪</a>
</div>
<div class="tab_common">
<a name="index_gwlc_5" class="track" href="#">5.验货签收</a>
</div>
</div>
</div> <!-- 提交问题 --> <div class="jiejue2"> <h3>这条帮助是否解决了您的问题？</h3>
<div class="qiehuan">
<input name="IsAvail" type="radio" value="1" checked="checked" /> 已解决
<input name="IsAvail" type="radio" value="0" /> 未解决
<input id="ContID" type="hidden" value="1"/>
</div> <div class="wenti" style="display:none">
<p>问题没解决？请选择原因:</p>
<p><select name="TrackID" id="TrackID" >
<option value="1">文字太多，阅读困难</option>
<option value="2">内容复杂，看不懂</option>
<option value="3">描述不清楚</option>
<option value="99">其他原因</option>
</select></p>
<div id="TrackContentDiv" style=" display:none;">
<p>也可以直接填写原因:</p>
<p><textarea name="TrackContent" id="TrackContent" cols="45" rows="5" ></textarea></p>
</div>
</div>
<p class="wenti_result"><a href=" "><img src="data:images/submit_bt.jpg"/></a></p>
</div> </div> </body>
</html>
jQuery实现鼠标滑过导航栏呈现不同的样式的更多相关文章
- uwp - 上滑隐藏导航栏下滑显示
原文:uwp - 上滑隐藏导航栏下滑显示 好久没写博客了,因为忙着工作.昨天周末填坑需要做一个上滑列表数据时隐藏导航栏下滑时显示的效果,下面分享一下我的做法,希望能给你带来帮助. 思路是通过判断滚动条 ...
- vue中滚动页面，改变样式&&导航栏滚动时，样式透明度修改
vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...
- 如何用jQuery实现在鼠标滚动后导航栏保持固定
要实现如下效果,鼠标滚动后,上方导航栏置顶固定 关键html代码: <div class="header-bottom"> <div class="co ...
- 用jquery制作一个简单的导航栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jQuery实现鼠标滑过图片列表加遮罩层
这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...
- iOS---实现简书和知乎的上滑隐藏导航栏下拉显示导航栏效果
因为自己用简书和知乎比较多,所以对其导航栏的效果比较好奇,自己私下里找资料实现了一下.这个效果的关键点在于下方可供滑动的内容的便宜距离inset的改变,以及滑动的scrollview代理的执行,废话不 ...
- [iOS微博项目 - 1.1] - 设置导航栏主题（统一样式）
A.导航栏两侧文字按钮 1.需求: 所有导航栏两侧的文字式按钮统一样式 普通样式:橙色 高亮样式:红色 不可用样式:亮灰 阴影:不使用 字体大小:15 github: https://github ...
- 如何控制iOS的导航栏和状态栏的样式
这是一个很常用的开发场景,就是改变导航栏上的文字颜色与背景色,如果你曾有 windows form 开发经验一定会笑我:"卧槽,这有什么好写的,不就是设置两个属性就可以了吗?" 我 ...
- 利用jQuery实现鼠标滑过整行变色
在很多网站都有这样的效果,那就是当鼠标放在新闻列表一行上的时候,整行就会变色,虽然使用CSS也能够实现此种功能,但是由于众多浏览器版本对于CSS3并没有良好的支持,所以在当前情况下,使用jQuery实 ...
随机推荐
- 【SignalR学习系列】1. SignalR理论介绍
什么是SignalR? ASP.NET SignalR 是一个让 ASP.NET开发者可以简单地给自己的程序添加即时通讯功能的开发库.即时通讯功能可以直接从服务器端给在线的客户端发送数据,而不用等待客 ...
- call和apply和bind区别
call和apply特征一样 都是用来调用函数 立即调用 但是可以在调用函数的同时 通过第一个参数指定函数内部this的指向 call 调用的时候 参数必须以参数列表的形式进行传递 也就是以逗号分隔的 ...
- Mac下安装 MongoDB
Mac 下安装 MongoDB 一般有两种方法,一种是通过源码安装,一种是直接使用 homebrew ,个人推荐使用 homebrew ,简单粗暴. 1.安装 homebrew : /usr/bin/ ...
- 聊聊synchronized的锁问题
本文不会特别深入细致地讨论synchronized,只是做一个通俗易懂的说明,以及看清一类问题的本质,希望能给大家一点启发. 问题描述 有一个类A,提供了三个方法.分别是静态同步方法,非静态同步方法, ...
- 八数码问题+路径寻找问题+bfs(隐式图的判重操作)
Δ路径寻找问题可以归结为隐式图的遍历,它的任务是找到一条凑够初始状态到终止问题的最优路径, 而不是像回溯法那样找到一个符合某些要求的解. 八数码问题就是路径查找问题背景下的经典训练题目. 程序框架 p ...
- SpringBoot实战总汇--详解
简介 Spring 诞生时是 Java 企业版(Java Enterprise Edition,JEE,也称 J2EE)的 轻量级代替品.无需开发重量级的 Enterprise JavaBean(EJ ...
- 剑指offer--二叉树的后序遍历
思路:对于一个二叉树的后序遍历序列来说,最后一个数一定是根节点,然后前面的数中,从最开始到第一个大于根节点的数都是左子树中的数,而后面到倒数第二个数应该都是大于根节点的,是右子树,如果后面的数中有小于 ...
- laravel框架cookie应用到中间件的理解
昨天博主接到一个委托的需求,大数据同事想要在请求日志抓取数据,希望在我的每个页面进行cookie的种植,方便他们进行定位分析,我思考了一下,简单呀,首先考虑的是通过中间件进行cookie种植,但是随后 ...
- AT NEW 和 AT END OF 的用法
第一条记录:col1='1000',col2='AAA1',col3=1 第二条记录:col1='1000',col2='AAA2',col3=2 第三条记录:col1='2000',col2='AA ...
- LoadRunner入门（一）
以LR自带的web系统为例(前提条件:已安装好lordrunner 11 ): 一.WebTours系统 是lordrunner自带一个飞机订票系统网站,支持IE浏览器 1. WebTours服务启动 ...