JS+CSS实现的日本门户网站经典选项卡导航效果

2015-09-28 17:04作者：yezheng

本文实例讲述了JS+CSS实现的日本门户网站经典选项卡导航效果。分享给大家供大家参考。具体如下：

这里介绍的是来自日本门户网站的一款CSS+JavaScript选项卡导航菜单，银灰色风格，看来日本人和中国人的审美是接近的，都喜欢这种风格，如果你要用的话，直接拷贝代码部分到你的网页中，注意你需要修改编码才行，日本的编码和中国可是不一样哦，只要把文字改为中国的就行了。

运行效果截图如下：

具体代码如下：

<HTML>

<HEAD>

<title>日本门户网站的经典选项卡导航</title>

*{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>

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>

<LI id="News01" class="focus"><A href="#" hidefocus="true" onclick="return tabclick(1);" ><SPAN>Codes</SPAN></A></LI>

<LI id="News05" class=""><A href="#" hidefocus="true" onclick="return tabclick(5);" ><SPAN>DELPHI</SPAN></A></LI>

</UL><DIV class="box hslice" id="News">

<a href="#" target="_blank">那个年少轻狂的年代，已经一去不回！</a>

</DIV>

</DIV>

<a href="#" target="_blank">Delphi</a>

</DIV>

</div>

</BODY>

</HTML>

希望本文所述对大家的JavaScript程序设计有所帮助。