table+css 做一个选项卡，不要用js，有高手会做吗？
用table+css做一个选项卡功能，不要用js，用js就太菜鸟了，有能做出来的高手，重分奖赏...
用table+css做一个选项卡功能，不要用js，用js就太菜鸟了，有能做出来的高手，重分奖赏
展开
4个回答
展开全部
用不用js和菜鸟基本没什么关系，参考下边的吧<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>tabs</title>
<style>
#newBox {
position:absolute;
width:240px;
height:170px;
border:1px solid #CCC;
}
#newContent {
margin:0px;
width:240px;
height:170px;
overflow:hidden;
}
#newCaption {
position:absolute;
left:1px;
}
ul{
margin:0px;
padding-left:3px;
padding-top:40px;
}
#a{background-position:1px 1x;}
#b{background-position:79px 1px;}
#c{background-position:159px 1px;}
li {
padding-left:5px;
height:27px;
font-size:12px;
white-space:nowrap;
overflow:hidden;
}
#newCaption a {
display:block;
float:left;
border-right:1px solid #CCCCCC;
border-bottom:2px solid #CCCCCC;
margin-top:3px;
width:78px;
height:31px;
line-height:31px;
text-align:center;
font-size:12px;
color:#000;
text-decoration:none;
font-weight:bold;
}
</style>
</head>
<body>
<div id="newBox">
<div id="newCaption">
<a href="#a" title="">tab1</a><a href="#b" title="">tab2</a><a href="#c" style="border-right:none" title="">tab3</a></dt>
</div>
<div id="newContent">
<ul id="a">
<li><a href="" title="">1111111111111111</a></li>
<li><a href="" title="">1111111111111111</a></li>
<li><a href="" title="">1111111111111111</a></li>
<li><a href="" title="">1111111111111111</a></li>
<li><a href="" title="">1111111111111111</a></li>
</ul>
<ul id="b">
<li><a href="" title="">2222222222222222</a></li>
<li><a href="" title="">2222222222222222</a></li>
<li><a href="" title="">2222222222222222</a></li>
<li><a href="" title="">2222222222222222</a></li>
<li><a href="" title="">2222222222222222</a></li>
</ul>
<ul id="c">
<li><a href="" title="">3333333333333333</a></li>
<li><a href="" title="">3333333333333333</a></li>
<li><a href="" title="">3333333333333333</a></li>
<li><a href="" title="">3333333333333333</a></li>
<li><a href="" title="">3333333333333333</a></li>
</ul>
</div>
</div>
</body>
</html>
<html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>tabs</title>
<style>
#newBox {
position:absolute;
width:240px;
height:170px;
border:1px solid #CCC;
}
#newContent {
margin:0px;
width:240px;
height:170px;
overflow:hidden;
}
#newCaption {
position:absolute;
left:1px;
}
ul{
margin:0px;
padding-left:3px;
padding-top:40px;
}
#a{background-position:1px 1x;}
#b{background-position:79px 1px;}
#c{background-position:159px 1px;}
li {
padding-left:5px;
height:27px;
font-size:12px;
white-space:nowrap;
overflow:hidden;
}
#newCaption a {
display:block;
float:left;
border-right:1px solid #CCCCCC;
border-bottom:2px solid #CCCCCC;
margin-top:3px;
width:78px;
height:31px;
line-height:31px;
text-align:center;
font-size:12px;
color:#000;
text-decoration:none;
font-weight:bold;
}
</style>
</head>
<body>
<div id="newBox">
<div id="newCaption">
<a href="#a" title="">tab1</a><a href="#b" title="">tab2</a><a href="#c" style="border-right:none" title="">tab3</a></dt>
</div>
<div id="newContent">
<ul id="a">
<li><a href="" title="">1111111111111111</a></li>
<li><a href="" title="">1111111111111111</a></li>
<li><a href="" title="">1111111111111111</a></li>
<li><a href="" title="">1111111111111111</a></li>
<li><a href="" title="">1111111111111111</a></li>
</ul>
<ul id="b">
<li><a href="" title="">2222222222222222</a></li>
<li><a href="" title="">2222222222222222</a></li>
<li><a href="" title="">2222222222222222</a></li>
<li><a href="" title="">2222222222222222</a></li>
<li><a href="" title="">2222222222222222</a></li>
</ul>
<ul id="c">
<li><a href="" title="">3333333333333333</a></li>
<li><a href="" title="">3333333333333333</a></li>
<li><a href="" title="">3333333333333333</a></li>
<li><a href="" title="">3333333333333333</a></li>
<li><a href="" title="">3333333333333333</a></li>
</ul>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
onmousemove/onmouseout算不算呀，那不用js好像不可能了噢。 圣殿之翼 ？在ie6里<a href="#b" title="">tab2</a>这样可行么。没试过呢。。不过好强呀。呵呵，这样也能想的到。。如果是我，我可能会写<a href="javascript:....." title="">像这样或<a href="#" title="" onclick="javascript:...">像你的这个我还没想过呢。。还是你强。。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
