这里介绍的是来自日本门户网站的一款css+javascript选项卡导航菜单，银灰色风格，看来日本人和中国人的审美是接近的，都喜欢这种风格，如果你要用的话，直接拷贝代码部分到你的网页中，注意你需要修改编码才行，日本的编码和中国可是不一样哦，只要把文字改为中国的就行了。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-css-japan-web-nav-demo/
具体代码如下：
<html><head><title>日本门户网站的经典选项卡导航</title><style type="text/css"> *{margin:0; padding:0;}body{ padding:0; margin:0; font-size:8pt; _font-size:x-small; color:#333; background:#fff; line-height:1.3em; word-break:break-all;}#tabnews{width:403px; padding:0; min-height:260px; border: 1px solid rid;margin:39px;}#news-navi{background:url(images/bg_navi.gif) 0 100% no-repeat;background-color:#ffffff !important; width:405px;}#news-navi li{float:left; list-style:none;}#news-navi #news01{width:102px;}#news-navi #news02{width:76px;}#news-navi #news03{width:76px;}#news-navi #news04{width:76px;}#news-navi #news05{width:75px;}#news-navi a{background:url(images/bg_navi.gif) 0 0 no-repeat;padding-top:1px;display:block;line-height:1.1;min-height:22px;_height:23px;text-align:center;}#news-navi a span{display:block;padding:3px 0 0;}#news-navi #news01 a{background-position:0 0;}#news-navi #news02 a{background-position:-102px 0;}#news-navi #news03 a{background-position:-178px 0;}#news-navi #news04 a{background-position:-254px 0;}#news-navi #news05 a{background-position:-330px 0;}#news-navi .focus a{font-weight:bold;color:#333333;}#news-navi #news01.focus a{background-position:-405px 0;}#news-navi #news02.focus a{background-position:-507px 0;}#news-navi #news03.focus a{background-position:-583px 0;}#news-navi #news04.focus a{background-position:-659px 0;}#news-navi #news05.focus a{background-position:-735px 0;} #news .news-content .dot li,#news .news-content .dot dd{padding-bottom:3px;}#news .news-content .dot li a,#news .news-content .dot dd a{padding-left:10px;}#news .more-content .dot li a,#news .more-content .dot dd a{background-position:-196px -546px;padding-left:6px;}#news{ min-height:238px;_height:238px; width:403px;border:1px solid #c4c4c4;margin-bottom:10px;border-top:none; background:#fff;}#news .pkg{width:393px; padding: 5px;}#news .arrr{background-position:-187px -298px;}#news #cococeleb{width:187px;}#news .news-content{width:206px; line-height:1.4;}#news .more-content{width:190px;}#news .new{ background-position:1px -140px;*background-position:1px -142px;}</style><script type="text/javascript" >function $(){var c=new array();for(var b=0;b<arguments.length;b++){var a=arguments[b];if(typeof a=="string"){if(document.getelementbyid){a=document.getelementbyid(a)}else{if(document.all){a=document.all(a)}}}if(arguments.length==1){return a}c.push(a)}return c};function tabclick(a){if($("news0"+a).classname!="focus"){settab(a);savecookie("ntab",a,200);return false}}function settab(a){ for(i=1;i<6;i++) { if(i==a) {$("news0"+i).classname="focus";$("newsarea0"+i).style.display="block"}else{$("news0"+i).classname="";$("newsarea0"+i).style.display= "none"} }}function savecookie(d,e,b){var c=arguments.length>2?b:"200";var a=new date();a.settime(a.gettime()+1000*60*60*24*(c));var f=a.togmtstring();document.cookie=d+"="+escape(e)+"; expires="+f+"; path=/;"}</script> </head><body><p id="tabnews"> <ul id="news-navi" class="pkg"><li id="news01" class="focus"><a href="#" hidefocus="true" onclick="return tabclick(1);" ><span>codes</span></a></li><li id="news02" class=""><a href="#" hidefocus="true" onclick="return tabclick(2);" ><span>asp</span></a></li><li id="news03" class=""><a href="#" hidefocus="true" onclick="return tabclick(3);" ><span>php</span></a></li><li id="news04" class=""><a href="#" hidefocus="true" onclick="return tabclick(4);" ><span>jsp</span></a></li><li id="news05" class=""><a href="#" hidefocus="true" onclick="return tabclick(5);" ><span>delphi</span></a></li></ul><p class="box hslice" id="news"> <p id="newsarea01" class="pkg pddt10" style="display: block; "><a href="#" target="_blank">那个年少轻狂的年代，已经一去不回！</a></p><p id="newsarea02" class="pkg pddt10" style="display: none; "> <a href="#" target="_blank">asp</a> </p> <p id="newsarea03" class="pkg pddt10" style="display: none; "> <a href="#" target="_blank">php</a></p> <p id="newsarea04" class="pkg pddt10" style="display: none; "> <a href="#" target="_blank">jsp</a> </p> <p id="newsarea05" class="pkg pddt10" style="display: none; "> <a href="#" target="_blank">delphi</a> </p> </p> </p> </p></body></html>
以上就是本章的全部内容，更多相关教程请访问javascript视频教程！