div+css选项卡问题
<SCRIPTlanguage=JavaScripttype=text/javascript>functionsetTab(m,n){vartli=document.ge...
<SCRIPT language=JavaScript type=text/javascript>
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
</SCRIPT>
<div id="tabs0"><ul class="menu3"></ul>
<ul class="menu0" id="menu0">
<li onmouseover="setTab(0,0)" class="hover">新闻</li>
<li onmouseover="setTab(0,1)">评论</li>
</ul>
<div class="main" id="main0">
<ul class="block">
<li>新闻列表</li></ul>
<ul><li class="z1">评列表asdasd<br />
adasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd</li>
<li class="z2">评列表eqwewqe<br />
asdasd<br />
adasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd</li>
<li class="z3">评列表asdasd<br />
adasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd</li>
</ul>
<ul><li>技术列表</li></ul>
<ul><li>点评表</li></ul>
</div>
</div>
我想在一个页面上用两个选项卡，js里我找不到控制的地方，哪位高手帮下忙，谢谢 展开
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
</SCRIPT>
<div id="tabs0"><ul class="menu3"></ul>
<ul class="menu0" id="menu0">
<li onmouseover="setTab(0,0)" class="hover">新闻</li>
<li onmouseover="setTab(0,1)">评论</li>
</ul>
<div class="main" id="main0">
<ul class="block">
<li>新闻列表</li></ul>
<ul><li class="z1">评列表asdasd<br />
adasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd</li>
<li class="z2">评列表eqwewqe<br />
asdasd<br />
adasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd</li>
<li class="z3">评列表asdasd<br />
adasd<br />
asdasd<br />
asdasd<br />
asdasd<br />
asdasd</li>
</ul>
<ul><li>技术列表</li></ul>
<ul><li>点评表</li></ul>
</div>
</div>
我想在一个页面上用两个选项卡，js里我找不到控制的地方，哪位高手帮下忙，谢谢 展开
2个回答
展开全部
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.Menu {
font-size: 12px;
width: 200px;
float: left;
border: 1px solid #CCCCCC;
}
ul {
margin: 0px;
padding: 0px;
}
.Menu ul li {
list-style-type: none;
height: 24px;
text-align: center;
line-height: 24px;
}
.Menu li a, .Menu li a:active {
border-bottom:1px solid #cccccc;
display: block;
height: 24px;
width: 200px;
text-decoration: none;
}
.Menu li a:hover {
background-color: #f2f6fb;
}
.content .textList li {
list-style-type: none;
}
.content {
width: 500px;
margin-left: 210px;
}
.content .textList {
border: 1px solid #CCCCCC;
height: 500px;
}
-->
</style>
</head>
<body>
<script type="text/javascript">
<!--
function swap_tab(n){
for(var i=1;i<=4;i++){
var curC=document.getElementById("tab_"+i);
var curB=document.getElementById("tab_t"+i);
if(n==i){
curC.style.display="block";
}else{
curC.style.display="none";
}
}
}
//-->
</script>
<div class="Menu" >
<ul>
<li onmouseover="return swap_tab(1)" id="tab_t1">
<a href="#">栏目导航1</a>
</li>
<li onmouseover="return swap_tab(2)" id="tab_t2">
<a href="#">栏目导航2</a>
</li>
<li onmouseover="return swap_tab(3)" id="tab_t3">
<a href="#">栏目导航3</a>
</li>
<li onmouseover="return swap_tab(4)" id="tab_t4">
<a href="#">栏目导航4</a>
</li>
</ul>
</div>
<div class="content">
<div id="tab_1">
<div class="textList">
<ul>
<li>栏目内容1</li>
</ul>
</div>
</div>
<div id="tab_2" style="display: none;">
<div class="textList">
<ul>
<li>栏目内容2</li>
</ul>
</div>
</div>
<div id="tab_3" style="display: none;">
<div class="textList">
<ul>
<li>栏目内容3</li>
</ul>
</div>
</div>
<div id="tab_4" style="display: none;">
<div class="textList">
<ul>
<li>栏目内容4</li>
</ul>
</div>
</div>
</div>
</body>
</html>
我这个容易理解啊,这个是左右的,你调下风格(改为上下)就可以了
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.Menu {
font-size: 12px;
width: 200px;
float: left;
border: 1px solid #CCCCCC;
}
ul {
margin: 0px;
padding: 0px;
}
.Menu ul li {
list-style-type: none;
height: 24px;
text-align: center;
line-height: 24px;
}
.Menu li a, .Menu li a:active {
border-bottom:1px solid #cccccc;
display: block;
height: 24px;
width: 200px;
text-decoration: none;
}
.Menu li a:hover {
background-color: #f2f6fb;
}
.content .textList li {
list-style-type: none;
}
.content {
width: 500px;
margin-left: 210px;
}
.content .textList {
border: 1px solid #CCCCCC;
height: 500px;
}
-->
</style>
</head>
<body>
<script type="text/javascript">
<!--
function swap_tab(n){
for(var i=1;i<=4;i++){
var curC=document.getElementById("tab_"+i);
var curB=document.getElementById("tab_t"+i);
if(n==i){
curC.style.display="block";
}else{
curC.style.display="none";
}
}
}
//-->
</script>
<div class="Menu" >
<ul>
<li onmouseover="return swap_tab(1)" id="tab_t1">
<a href="#">栏目导航1</a>
</li>
<li onmouseover="return swap_tab(2)" id="tab_t2">
<a href="#">栏目导航2</a>
</li>
<li onmouseover="return swap_tab(3)" id="tab_t3">
<a href="#">栏目导航3</a>
</li>
<li onmouseover="return swap_tab(4)" id="tab_t4">
<a href="#">栏目导航4</a>
</li>
</ul>
</div>
<div class="content">
<div id="tab_1">
<div class="textList">
<ul>
<li>栏目内容1</li>
</ul>
</div>
</div>
<div id="tab_2" style="display: none;">
<div class="textList">
<ul>
<li>栏目内容2</li>
</ul>
</div>
</div>
<div id="tab_3" style="display: none;">
<div class="textList">
<ul>
<li>栏目内容3</li>
</ul>
</div>
</div>
<div id="tab_4" style="display: none;">
<div class="textList">
<ul>
<li>栏目内容4</li>
</ul>
</div>
</div>
</div>
</body>
</html>
我这个容易理解啊,这个是左右的,你调下风格(改为上下)就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
