网页选项卡

来源：互联网发布：淘宝客宣传素材编辑：程序博客网时间：2024/05/19 16:19

导入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>