div + css实现Tab菜单
3个回答
展开全部
需要再加上JS进入控制。具体代码如下，JS的功能就是用来修改CSS中的display属性。下面的代码只是做一些简单的原理演示，你可以跟据你自己的需要进行修改。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.tabnav ul{margin:0;padding:0;list-style:none;}
.tabnav li{padding:5 10px;border:1px solid red;float:left;}
.tabid {border:1px solid #000;clear:both;}
</style>
<script language='javascript'>
function tab(n){
var tabnav="tab"+n;
var tabid="tabid"+n;
cleardisplay();
document.getElementById(tabid).style.display="block";
}
function cleardisplay(){
for (i=1;i<3;i++)
{
var cleartabid="tabid"+i;
document.getElementById(cleartabid).style.display="none";
}
}
</script>
</HEAD>
<BODY>
<div>
<div class='tabnav'>
<ul>
<li id='tab1' onclick='tab(1)'>TAB1</li>
<li id='tab2' onclick='tab(2)'>TAB2</li>
</ul>
</div>
<div id='tabid1' class='tabid'>tab1</div>
<div id='tabid2' class='tabid' style='display:none;'>tab2</div>
</div>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.tabnav ul{margin:0;padding:0;list-style:none;}
.tabnav li{padding:5 10px;border:1px solid red;float:left;}
.tabid {border:1px solid #000;clear:both;}
</style>
<script language='javascript'>
function tab(n){
var tabnav="tab"+n;
var tabid="tabid"+n;
cleardisplay();
document.getElementById(tabid).style.display="block";
}
function cleardisplay(){
for (i=1;i<3;i++)
{
var cleartabid="tabid"+i;
document.getElementById(cleartabid).style.display="none";
}
}
</script>
</HEAD>
<BODY>
<div>
<div class='tabnav'>
<ul>
<li id='tab1' onclick='tab(1)'>TAB1</li>
<li id='tab2' onclick='tab(2)'>TAB2</li>
</ul>
</div>
<div id='tabid1' class='tabid'>tab1</div>
<div id='tabid2' class='tabid' style='display:none;'>tab2</div>
</div>
</BODY>
</HTML>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
先写好html和css，定义两个class类！一个用于装饰外观及在正常状态下的样式外观！另一个用于当鼠标经过或者点击后需要展示或切换的内容！最后用javascript注册鼠标事件！完成动态交互！祝你成功！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
花个几分钟时间来给你处理。<style type="text/css">* {margin:0; padding:0}ul {height:25px; background-color:#333; line-height:25px}li {float:left; width:auto; list-style:none; margin-right:10px}li a {color:#FFF}li a:active {color:#FF6600; font-weight:700}p {height:100px; line-height:25px}#tabs_content {height:100px;overflow:hidden}</style><div id="tabs">
<ul>
<li><a href="#tabs_one">title_one</a></li>
<li><a href="#tabs_two">title_two</a></li>
<li><a href="#tabs_three">title_three</a></li>
</ul>
<div id="tabs_content">
<p id="tabs_one">content_one content_one content_onecontent_one</p>
<p id="tabs_two">content_twocontent_twocontent_twocontent_twocontent_twocontent_twocontent_twocontent_two</p>
<p id="tabs_three">content_threecontent_threecontent_threecontent_threecontent_threecontent_threecontent_three</p>
</div>
</div>
<ul>
<li><a href="#tabs_one">title_one</a></li>
<li><a href="#tabs_two">title_two</a></li>
<li><a href="#tabs_three">title_three</a></li>
</ul>
<div id="tabs_content">
<p id="tabs_one">content_one content_one content_onecontent_one</p>
<p id="tabs_two">content_twocontent_twocontent_twocontent_twocontent_twocontent_twocontent_twocontent_two</p>
<p id="tabs_three">content_threecontent_threecontent_threecontent_threecontent_threecontent_threecontent_three</p>
</div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
