suchen

Heim >Web-Frontend >js-Tutorial >Klassischer Tab-Navigationseffekt der japanischen Portal-Website, implementiert durch JS CSS

Klassischer Tab-Navigationseffekt der japanischen Portal-Website, implementiert durch JS CSS

PHPz
PHPznach vorne
2016-05-16 15:37:442063Durchsuche

In diesem Artikel wird hauptsächlich der von JS CSS implementierte klassische Tab-Navigationseffekt vorgestellt, der das dynamische Durchlaufen von Seitenelementen und die dynamische Änderung von Stilen umfasst. Freunde, die ihn benötigen, können sich darauf beziehen folgt:

Was hier vorgestellt wird, ist ein CSS-JavaScript-Tab-Navigationsmenü von einer japanischen Portal-Website mit einem silbergrauen Stil. Es scheint, dass die Ästhetik von Japanern und Chinesen ähnlich ist, und das gefällt beiden Wenn Sie es verwenden möchten, kopieren Sie den Codeteil direkt auf Ihre Webseite. Die Codierung in Japan unterscheidet sich einfach von der in China.

Ein Screenshot des Laufeffekts lautet wie folgt:

Die Online-Demo-Adresse lautet wie folgt:

http: //demo.jb51.net/ js/2015/js-css-japan-web-nav-demo/

Der spezifische Code lautet wie folgt: 

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

Der Oben finden Sie den gesamten Inhalt dieses Kapitels. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial!

Stellungnahme：
Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：So erwerben Sie JS-Kenntnisse für dynamisches Datum und Uhrzeit_JavascriptNächster Artikel：So erwerben Sie JS-Kenntnisse für dynamisches Datum und Uhrzeit_Javascript

In Verbindung stehende Artikel

Mehr sehen