This article is an example of the JS+CSS implementation of the Japanese Portal Site Classic tab navigation effect. Share to everyone for your reference. Specifically as follows:
Here is the introduction of a Japanese portal from the Css+javascript tab navigation menu, silver-gray style, it seems that the Japanese and Chinese aesthetic is close, like this style, if you want to use, directly copy the code section to your Web page, note you need to modify the code to the line, Japan's code and China is not the same oh, as long as the text changed to China on the line.
The screenshot of the running effect is as follows:
The online demo address is as follows:
http://demo.jb51.net/js/2015/js-css-japan-web-nav-demo/
The specific code is as follows:
<HTML> <HEAD> <title> Japanese Portal Classic tab navigation </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 (ima Ges/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. 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-con Tent. 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); 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: "$"; var a=new Date (); A.settime (A.gettime () +1000*60*60*24* (C)); var f=a.togmtstring ();d ocument.cookie=d+ "=" +escape (E) + "; Expires= "+f+";
path=/; "}</SCRIPT> </HEAD> <BODY> <div id= "Tabnews" > <ul id= "News-navi" class= "pkg" > <li id= "Ne Ws01 "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><div class= "box Hslice" id= "News" > <div id= "NewsArea01" class= "pkg pddT10" style= "display:block; "> <a href=" # "target="_blank" > that young frivolous era, has been a go back! </a> </DIV> <div id= "newsArea02" class= "pkg pddT10" style=; "> <a href=" # "target=" _blank ">ASP</a> </DIV> <div id=" newsArea03 "class=" pkg pddT10 "style=" di Splay:none; "> <a href=" # "target=" _blank ">PHP</a></DIV> <div id=" newsArea04 "class=" pkg pddT10 "style=" Display:none; "> <a href=" # "target=" _blank ">Jsp</a> </DIV> <div id=" newsArea05 "class=" pkg pddT10 "style=" di Splay:none; "> <a href=" # "target=" _blank ">Delphi</a> </DIV> </DIV> </div> </div> </bod Y> </HTML>
The
wants this article to help you with your JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
