左导航,当前二级菜单项展开时,其余导航项关闭
帮助中心,文本框获得焦点时,默认文字消失,失去焦点时,再次显示文字
购物流程,鼠标指针移过时,当前项高亮显示,鼠标指针移至父元素或祖先元素时,依旧高亮,只有当鼠标指针移至其同辈元素时,同辈元素高亮,而去掉该元素高亮样式
问题解决,选中按钮“未解决”时显示相关内容
<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>购物流程</li>
<li>服务条款</li>
<li>积分计划</li>
<li>取消订单</li>
</ul>
</li>
<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>在线支付</li>
<li>货到付款</li>
<li>VANCL礼品卡</li>
<li>发票制度</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="images/submit_bt.jpg"/></a></p>
</div>
</div>
</body>
*{
margin:0px;
padding:0px;
font-size:12px;
}
#bodyDiv{
position:relative;
background:#FFF url(../images/bg.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;
}
.act{
background-color: #008844;
}
.acta{
background-color: white;
}
$(document).ready(function () {
$(".first").click(function () {
$(this).next().show().end().parent().siblings().children("ul").hide();
});
$(".search").focus(function () {
$(this).attr({"value": ""});
}).blur(function () {
if ($("input").attr("value") == "") {
$(this).attr({"value": "请输入要查询的问题"});
}
});
$(".qiehuan input:eq(1)").click(function () {
$(".wenti").show();
});
$(".second li").each(function () {
$(this).mouseover(function () {
$(this).addClass("act").siblings().removeClass("act").end().parent().prev().addClass("act").end().parents().siblings().children(".first").removeClass("act");
});
});
});