导入8-9.CSS
body{
margin:10px;
}
#content{ /* 具体内容 */
border-left:1px solid #11a3ff; /* 左边框 */
border-right:1px solid #11a3ff; /* 右边框 */
border-bottom:1px solid #11a3ff; /* 下边框 */
padding:15px;
font-size:12px;
}
ul#tabnav{
list-style-type:none;
margin:0px;
padding-left:0px; /* 左侧无空隙 */
padding-bottom:23px;
border-bottom:1px solid #11a3ff; /* 菜单的下边框 */
font:bold 12px verdana, arial;
}
ul#tabnav li{
float:left;
height:22px;
background-color:#a3dbff;
margin:0px 3px 0px 0px;
border:1px solid #11a3ff;
}
ul#tabnav a:link, ul#tabnav a:visited{
display:block; /* 块元素 */
color:#006eb3;
text-decoration:none;
padding:5px 10px 3px 10px;
}
ul#tabnav a:hover{
background-color:#006eb3;
color:#FFFFFF;
}
body#home li.home, body#news li.news, /* 当前页面的菜单项 */
body#sports li.sports, body#music li.music,
body#nextstation li.nextstation,
body#blog li.blog{
border-bottom:1px solid #FFFFFF; /* 白色下边框,覆盖<ul>中的蓝色下边框 */
color:#000000;
background-color:#FFFFFF;
}
body#home li.home a:link, body#home li.home a:visited, /* 当前页面的菜单项的超链接 */
body#news li.news a:link, body#news li.news a:visited,
body#sports li.sports a:link, body#sports li.sports a:visited,
body#music li.music a:link, body#music li.music a:visited,
body#nextstation li.nextstation a:link, body#nextstation li.nextstation a:visited,
body#blog li.blog a:link, body#blog li.blog a:visited{
color:#000000;
background-color:#FFFFFF;
}
body#home li.home a:hover, body#news li.news a:hover,
body#sports li.sports a:hover, body#music li.music a:hover,
body#nextstation li.nextstation a:hover,
body#blog li.blog a:hover{
color:#006eb3;
text-decoration:underline;
}
<!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>
<link href="8-9.css" rel="stylesheet" />
<style type="text/css">
#leftpic{
width:160px;
float:left;
padding-right:15px;
}
#leftpic a:link, #leftpic a:visited{
color:#006eb3;
text-decoration:none;
}
#leftpic a:hover{
color:#000000;
text-decoration:underline;
}
img{
border:1px solid #0066b0;
margin-bottom:5px;
}
ul#list{
list-style-type:none;
margin:0px;
padding:5px 0px 5px 2px;
}
ul#list li{
line-height:18px;
}
ul#list li a:link{
color:#000000;
text-decoration:none;
}
ul#list li a:visited{
color:#333333;
text-decoration:none;
}
ul#list li a:hover{
color:#006eb3;
text-decoration:underline;
}
ul#llist li a:active{
border-bottom:1px solid #FFFFFF;
color:#000000;
background-color:#FFFFFF;
}
.hide{display:none; }
.tab_box { clear:both; border:1px solid #11a3ff; height:120px;
font-size:12px;
padding:15px;}
.home{
border-bottom:1px solid #FFFFFF;
color:#000000;
background-color:#FFFFFF;
}
</style>
<script language="javascript" src="jquery-1.1.3.1.min.js"></script>
<script language="javascript">
$(function(){
var $div_li=$("div.tab_menu ul li");
$div_li.mouseover(function(){
$(this).addClass("home") //当前<li>元素高亮
.siblings().removeClass("home"); //去掉其它同辈<li>元素的高亮
var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
$("div.tab_box > div") //选取子节点。不选取子节点的话,会引起错误。如果里面还有div
.eq(index).show() //显示 <li>元素对应的<div>元素
.siblings().hide(); //隐藏其它几个同辈的<div>元素
});
})
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页选项卡</title>
</head>
<body id="home">
<div class="tab" style="left:0px;">
<div class="tab_menu">
<ul id="tabnav">
<li class="home"><a href="8-9_home.html">首页</a></li>
<li ><a href="8-9_news.html">新闻</a></li>
<li ><a href="8-9_sports.html">体育</a></li>
<li ><a href="8-9_music.html">音乐</a></li>
<li><a href="8-9_nextstation.html">下一站</a></li>
<li ><a href="8-9_blog.html">博客</a></li>
</ul>
</div>
<div class="tab_box" style="left:0px;">
<div><span id="leftpic">
<a href="#"><img src="pic1.jpg"><br>
<center>追忆往事,展望未来</center></a>
</span>
<ul id="list">
<li><a href="#">[首页] 追忆往事,展望未来。新年寄语</a></li>
<li><a href="#">[新闻] 每年五一、十一长假,很多人不愿出门</a></li>
<li><a href="#">[新闻] 清华大学电子系研制成功新一代...</a></li>
<li><a href="#">[体育] 奥运火炬接力火热进行</a></li>
<li><a href="#">[音乐] 网民调查,你最喜欢的音乐类型</a></li>
<li><a href="#">[博客] 自由博客新版正式发布,网友...</a></li>
</ul></div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
<div class="hide">动画</div>
<div class="hide"><span id="leftpic">
<a href="#"><img src="pic2.jpg"><br>
<center>追忆往事,展望未来</center></a>
</span>
<ul id="list">
<li>1. 在列车出发前,请将自己的手机置于无声状态。</li>
<li>2. 遵守乘车秩序,不要抢占座位。</li>
<li>3. 请勿在车厢内大声喧哗,或随意投弃杂物。</li>
<li>4. 本次列车全部为无烟列车,车厢内严禁吸烟。</li>
<li>5. 严禁携带易燃易爆等危险物品上车。</li>
<li>6. 如需在车厢内拍照,请勿使用闪光灯。</li>
<li>7. 请保持通道畅通,并留意距您最近的安全出口。</li>
</ul></div>
<div class="hide">博客</div>
</div>
</div>
</body>
</html>
第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>
<style type="text/css">
*{ margin:0; padding:0;}
body { font:15px/19px Arial, Helvetica, sans-serif; color:#666;}
.tab { width:500px;margin:50px;}
.tab_menu { clear:both;}
.tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
.tab_menu li.hover { background:#DFDFDF;}
.tab_menu li.selected { color:#FFF; background:#6D84B4;}
.tab_box { clear:both; border:5px solid #898989; height:1000px;
min-width:900px;}
.hide{display:none; }
</style>
<script language="javascript" src="file:///E|/js/jquery/jquery-1.1.3.1.min.js"></script>
<script language="javascript">
$(function(){
var $div_li=$("div.tab_menu ul li");
$div_li.mouseover(function(){
$(this).addClass("selected") //当前<li>元素高亮
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮
var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
$("div.tab_box > div") //选取子节点。不选取子节点的话,会引起错误。如果里面还有div
.eq(index).show() //显示 <li>元素对应的<div>元素
.siblings().hide(); //隐藏其它几个同辈的<div>元素
});
})
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div class="tab" style="left:0px;">
<div class="tab_menu">
<ul>
<li class="selected">精彩推荐</li>
<li>最热电视</li>
<li>最热电影</li>
<li>最热动画</li>
<li>最热音乐</li>
</ul>
</div>
<div class="tab_box" style="left:0px;">
<div>时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
<div class="hide">动画</div>
<div class="hide">音乐</div>
</div>
</div>
</body>
</html>