上下两个导航,点击上面的导航,下面出现一排小的导航
第二级导航中,会实现鼠标滑动后改变相应div内容的效果
<script language="javascript" type="text/javascript">
//标签页2
function selectContent(showNav,showContent,selfObj){
// 操作标签
var tag = document.getElementById("content-view-mm").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.className = "m_li_a";
// 操作第二级标签
for(i=1; j=document.getElementById("s_"+i); i++){
j.style.display = "none";
}
document.getElementById(showNav).style.display = "block";
//操作内容
var tagContent = document.getElementById("forth-detail-content").getElementsByTagName("div");
var taglength = tagContent.length;
for(i=0; i<taglength; i++){
//tagContent[i].className = "forthContent";
tagContent[i].style.display="none";
}
document.getElementById(showContent).style.display = "block";
}
//标签页里面的滑动效果
//初始化
var def="1";
function mover(object){
//主菜单
var tt=document.getElementById("t_"+object);
tt.className="selectThirdTag";
//初始主菜单先隐藏效果
if(def!=0){
var tdef=document.getElementById("t_"+def);
tdef.className="thirdTags";
}
//子菜单
var ff=document.getElementById("f_"+object);
ff.style.display="block";
//初始子菜单先隐藏效果
if(def!=0){
var fdef=document.getElementById("s_"+def);
fdef.style.display="none";
}
}function mout(object){
//主菜单
var tt=document.getElementById("t_"+object);
tt.className="thirdTags";
//初始主菜单还原效果
if(def!=0){
var tdef=document.getElementById("t_"+def);
tdef.className="selectThirdTag";
}
//子菜单
var ff=document.getElementById("f_"+object);
ff.style.display="none";
//初始子菜单还原效果
if(def!=0){
var fdef=document.getElementById("f_"+def);
fdef.style.display="block";
}
}
</script> <div class="content-view1">
<div class="content-view1-nav">
<h2>整形美容项目</h2>
<div class="content-view1-nav1" id="content-view1-tag">
<ul id="content-view-mm">
<li id="m_1" class="m_li_a" onclick="selectContent('s_1','f_11',this)" ><a href="#">面部轮廓</a></li>
<li id="m_2" onclick="selectContent('s_2','f_21',this)"><a href="#">眼部美容</a></li>
<li id="m_3" onclick="selectContent('s_3','f_31',this)"><a href="#">鼻部美容</a></li>
<li id="m_4" onclick="selectContent('s_4','f_41',this)"><a href="#">胸部美容</a></li>
<li id="m_5" onclick="selectContent('s_5','f_51',this)"><a href="#">形体美容</a></li>
<li id="m_6" onclick="selectContent('s_6','f_61',this)"><a href="#">牙齿美容</a></li>
</ul>
</div>
</div>
<div class="content-view1-main">
<div class="view-left">
<div class="view-left-pic">
<a href="#">
<img src="images/mingxing.jpg" />
</a>
</div>
<%--此处应该有多个details--%>
<div class="view-left-nav-detail">
<ul id="smenu">
<li id="s_1" class="s_li s_li_a" >
<a href="javascript:void(0)" id="t_11" class="selectThirdTag">财税简介</a> |
</li>
<li id="s_2" class="s_li">
<a href="javascript:void(0)" onmouseover='mover(21);' onmouseout='mout(21);' class="thirdTags" name="thirdTags" id="t_21">财税简介</a> |
</li>
<li id="s_3" class="s_li">
<a href="javascript:void(0)" onmouseover='mover(31);' onmouseout='mout(31);' class="thirdTags" name="thirdTags" id="t_31">下载专区</a> |
<a href="javascript:void(0)" onmouseover='mover(32);' onmouseout='mout(32);' class="thirdTags" name="thirdTags" id="t_32" >上传专区</a> |
</li>
<li id="s_4" class="s_li">
<a href="javascript:void(0)" onmouseover='mover(41);' onmouseout='mout(41);' class="thirdTags" name="thirdTags" id="t_41">最新公告</a> |
</li>
<li id="s_5" class="s_li">
<a href="javascript:void(0)" onmouseover='mover(51);' onmouseout='mout(51);' class="thirdTags" name="thirdTags" id="t_51">最新政策</a> |
<a href="javascript:void(0)" onmouseover='mover(52);' onmouseout='mout(52);' class="thirdTags" name="thirdTags" id="t_52">政策法规查询</a>
</li>
<li id="s_6" class='s_li'>
<a href="javascript:void(0)" onmouseover='mover(61);' onmouseout='mout(61);' class="thirdTags" name="thirdTags" id="t_61">税收宣传</a> |
</li>
</ul>
<div class="detail-content" id="forth-detail-content">
<div id="f_11" name="forthContentDetail" class="forthContent selectForthContent">内容11</div>
<div id="f_21" onmouseover='mover(21);' onmouseout='mout(21);' name="forthContentDetail" class="forthContent">内容21</div>
<div id="f_31" onmouseover='mover(31);' onmouseout='mout(31);' name="forthContentDetail" class="forthContent">内容31</div>
<div id="f_32" onmouseover='mover(32);' onmouseout='mout(32);' name="forthContentDetail" class="forthContent">内容32</div>
<div id="f_41" onmouseover='mover(41);' onmouseout='mout(41);' name="forthContentDetail" class="forthContent">内容41</div>
<div id="f_51" onmouseover='mover(51);' onmouseout='mout(51);' name="forthContentDetail" class="forthContent">内容51</div>
<div id="f_52" onmouseover='mover(52);' onmouseout='mout(52);' name="forthContentDetail" class="forthContent">内容52</div>
<div id="f_61" onmouseover='mover(61);' onmouseout='mout(61);' name="forthContentDetail" class="forthContent">内容61</div>
</div>
</div>
</div>
</div>
</div>
第二级导航中,会实现鼠标滑动后改变相应div内容的效果
<script language="javascript" type="text/javascript">
//标签页2
function selectContent(showNav,showContent,selfObj){
// 操作标签
var tag = document.getElementById("content-view-mm").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.className = "m_li_a";
// 操作第二级标签
for(i=1; j=document.getElementById("s_"+i); i++){
j.style.display = "none";
}
document.getElementById(showNav).style.display = "block";
//操作内容
var tagContent = document.getElementById("forth-detail-content").getElementsByTagName("div");
var taglength = tagContent.length;
for(i=0; i<taglength; i++){
//tagContent[i].className = "forthContent";
tagContent[i].style.display="none";
}
document.getElementById(showContent).style.display = "block";
}
//标签页里面的滑动效果
//初始化
var def="1";
function mover(object){
//主菜单
var tt=document.getElementById("t_"+object);
tt.className="selectThirdTag";
//初始主菜单先隐藏效果
if(def!=0){
var tdef=document.getElementById("t_"+def);
tdef.className="thirdTags";
}
//子菜单
var ff=document.getElementById("f_"+object);
ff.style.display="block";
//初始子菜单先隐藏效果
if(def!=0){
var fdef=document.getElementById("s_"+def);
fdef.style.display="none";
}
}function mout(object){
//主菜单
var tt=document.getElementById("t_"+object);
tt.className="thirdTags";
//初始主菜单还原效果
if(def!=0){
var tdef=document.getElementById("t_"+def);
tdef.className="selectThirdTag";
}
//子菜单
var ff=document.getElementById("f_"+object);
ff.style.display="none";
//初始子菜单还原效果
if(def!=0){
var fdef=document.getElementById("f_"+def);
fdef.style.display="block";
}
}
</script> <div class="content-view1">
<div class="content-view1-nav">
<h2>整形美容项目</h2>
<div class="content-view1-nav1" id="content-view1-tag">
<ul id="content-view-mm">
<li id="m_1" class="m_li_a" onclick="selectContent('s_1','f_11',this)" ><a href="#">面部轮廓</a></li>
<li id="m_2" onclick="selectContent('s_2','f_21',this)"><a href="#">眼部美容</a></li>
<li id="m_3" onclick="selectContent('s_3','f_31',this)"><a href="#">鼻部美容</a></li>
<li id="m_4" onclick="selectContent('s_4','f_41',this)"><a href="#">胸部美容</a></li>
<li id="m_5" onclick="selectContent('s_5','f_51',this)"><a href="#">形体美容</a></li>
<li id="m_6" onclick="selectContent('s_6','f_61',this)"><a href="#">牙齿美容</a></li>
</ul>
</div>
</div>
<div class="content-view1-main">
<div class="view-left">
<div class="view-left-pic">
<a href="#">
<img src="images/mingxing.jpg" />
</a>
</div>
<%--此处应该有多个details--%>
<div class="view-left-nav-detail">
<ul id="smenu">
<li id="s_1" class="s_li s_li_a" >
<a href="javascript:void(0)" id="t_11" class="selectThirdTag">财税简介</a> |
</li>
<li id="s_2" class="s_li">
<a href="javascript:void(0)" onmouseover='mover(21);' onmouseout='mout(21);' class="thirdTags" name="thirdTags" id="t_21">财税简介</a> |
</li>
<li id="s_3" class="s_li">
<a href="javascript:void(0)" onmouseover='mover(31);' onmouseout='mout(31);' class="thirdTags" name="thirdTags" id="t_31">下载专区</a> |
<a href="javascript:void(0)" onmouseover='mover(32);' onmouseout='mout(32);' class="thirdTags" name="thirdTags" id="t_32" >上传专区</a> |
</li>
<li id="s_4" class="s_li">
<a href="javascript:void(0)" onmouseover='mover(41);' onmouseout='mout(41);' class="thirdTags" name="thirdTags" id="t_41">最新公告</a> |
</li>
<li id="s_5" class="s_li">
<a href="javascript:void(0)" onmouseover='mover(51);' onmouseout='mout(51);' class="thirdTags" name="thirdTags" id="t_51">最新政策</a> |
<a href="javascript:void(0)" onmouseover='mover(52);' onmouseout='mout(52);' class="thirdTags" name="thirdTags" id="t_52">政策法规查询</a>
</li>
<li id="s_6" class='s_li'>
<a href="javascript:void(0)" onmouseover='mover(61);' onmouseout='mout(61);' class="thirdTags" name="thirdTags" id="t_61">税收宣传</a> |
</li>
</ul>
<div class="detail-content" id="forth-detail-content">
<div id="f_11" name="forthContentDetail" class="forthContent selectForthContent">内容11</div>
<div id="f_21" onmouseover='mover(21);' onmouseout='mout(21);' name="forthContentDetail" class="forthContent">内容21</div>
<div id="f_31" onmouseover='mover(31);' onmouseout='mout(31);' name="forthContentDetail" class="forthContent">内容31</div>
<div id="f_32" onmouseover='mover(32);' onmouseout='mout(32);' name="forthContentDetail" class="forthContent">内容32</div>
<div id="f_41" onmouseover='mover(41);' onmouseout='mout(41);' name="forthContentDetail" class="forthContent">内容41</div>
<div id="f_51" onmouseover='mover(51);' onmouseout='mout(51);' name="forthContentDetail" class="forthContent">内容51</div>
<div id="f_52" onmouseover='mover(52);' onmouseout='mout(52);' name="forthContentDetail" class="forthContent">内容52</div>
<div id="f_61" onmouseover='mover(61);' onmouseout='mout(61);' name="forthContentDetail" class="forthContent">内容61</div>
</div>
</div>
</div>
</div>
</div>
解决方案 »
- jsp里dwr的传值问题
- JavaScript能调用 framework 2.0
- 求助:完全匹配的正则
- extjs 怎么实现 国际化?
- JavaScript动态生成下拉列表
- 关于window.onload问题
- 这段js代码在firefox里可以正常运行,在ie里却报缺少对象,还请大虾们指点迷津啊。
- 网页中两边的树型广告?http://www.qzvnet.com/载它来参不透,网上也不知如何查找,哪位朋友给一段?
- 如何使得html里的下拉列表框(<select>)只能读,不能选择??
- 请问关于VML线条粗细问题?
- div模块移动之绝对难题。。什么原理
- jQuery的实现Ajax验证表单的一个问题
.content-view1-nav{ width:973px; overflow:hidden; height:50px;}
.content-view1-nav h2{ margin:0; font-size:16px; font-weight:bold; line-height:45px; float:left; width:250px; padding-left:20px; background-color:#F9F4EE;}
.content-view1-nav1{float:left; font-size:14px; color:#961415;}
.content-view1-nav1 a:hover{ border-bottom:2px solid #e1e1e1}
.content-view1-nav1 a{ border-bottom:2px solid #a10000 ;height: 45px; line-height: 45px; float: left; display:block; text-align: center;vertical-align: middle; padding-right:5px; width: 60px;}#content-view-mm{padding:0px; margin:0px;}
#content-view-mm li{ float:left;}
#content-view-mm li.m_li_a{ background-color:Gray;}
.forthContent{ display:none;}
.selectForthContent{ display:block;}
#smenu{ padding:0px; margin:0px;}
#smenu li.s_li{ width:400px; height:20px;display:none;}
#smenu li.s_li_a{ display:block;}
http://jqueryui.com/demos/accordion/