本文實例講述了js實現顯示當前狀態的導航效果代碼。分享給大家供大家參考。具體如下：
這里演示顯示當前狀態的導航，鼠標點擊左側的導航菜單，右側的內容就會變換，實際上是一個豎向的TAB選項卡，作為菜單來用的話，它正好可以顯示當前的菜單位置，比較經典。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-show-nav-style-status-codes/
具體代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>顯示當前狀態的導航</title><style type="text/css">body { font-family:verdana; }#content { float:left; width:400px; border:1px solid #ccc; margin-left:20px; padding:2px 10px 10px 10px; }ul { margin:0; padding:0; list-style: none; width:200px; float:left; }ul li { margin:0 0 1px 0; padding:0; }ul li a { display:block; padding:8px; text-decoration:none; background: #eee; color: #039;}ul li a:hover { background: #ffc;}ul li a.selected { background: #c63; color:#fff;}#content div { display:none; }#content div.on { display:block; }</style><script type="text/javascript">function applySelectedTo(link) { var ul = document.getElementsByTagName("ul")[0]; // get the first ul tag on the page var allLinks = ul.getElementsByTagName("a"); // get all the links within that ul for (var i=0; i<allLinks.length; i++) { // iterate through all those links allLinks[i].className = ""; // and assign their class names to nothing } link.className = "selected"; // finally, assign class="selected" to our chosen link var allDivs = document.getElementsByTagName("div"); for (var k=0; k<allDivs.length; k++) { allDivs[k].className = ""; } var lyricId = link.getAttribute("href").split("#")[1]; lyricId = document.getElementById(lyricId); lyricId.className = "on";}</script></head><body><h1>A list of links (styled, selected state, onclick, return false, and does something)</h1><ul> <li><a onclick="applySelectedTo(this);return false;" href="#heartbreakHotel">世界七星級賓館</a></li> <li><a onclick="applySelectedTo(this);return false;" href="#blueSuedeShoes">藍色夢想</a></li> <li><a onclick="applySelectedTo(this);return false;" href="#houndDog" class="selected">千年等待</a></li> <li><a onclick="applySelectedTo(this);return false;" href="#dontBeCruel">不要忘記我</a></li> <li><a onclick="applySelectedTo(this);return false;" href="#teddyBear">青島啤酒</a></li></ul><div id="content"> <div id="heartbreakHotel"> <h2>Heartbreak Hotel</h2> <p>Well, since my baby left me,<br /> I found a new place to dwell.<br /> Its down at the end of lonely street<br /> At heartbreak hotel.</p> <p>You make me so lonely baby,<br /> I get so lonely,<br /> I get so lonely I could die.</p> <p>And although its always crowded,<br /> You still can find some room.<br /> Where broken hearted lovers<br /> Do cry away their gloom.</p> <p>You make me so lonely baby,<br /> I get so lonely,<br /> I get so lonely I could die.</p> <p>Well, the bell hops tears keep flowin,<br /> And the desk clerks dressed in black.<br /> Well they been so long on lonely street<br /> They aint ever gonna look back.</p> <p>You make me so lonely baby,<br /> I get so lonely,<br /> I get so lonely I could die.</p> <p>Hey now, if your baby leaves you,<br /> And you got a tale to tell.<br /> Just take a walk down lonely street<br /> To heartbreak hotel.</p> </div> <div id="blueSuedeShoes"> <h2>Blue Suede Shoes</h2> <p>Well, its one for the money,<br /> Two for the show,<br /> Three to get ready,<br /> Now go, cat, go.</p> <p>But dont you step on my blue suede shoes.<br /> You can do anything but lay off of my blue suede shoes.</p> <p>Well, you can knock me down,<br /> Step in my face,<br /> Slander my name<br /> All over the place.</p> <p>Do anything that you want to do, but uh-uh,<br /> Honey, lay off of my shoes<br /> Dont you step on my blue suede shoes.<br /> You can do anything but lay off of my blue suede shoes.</p> <p>You can burn my house,<br /> Steal my car,<br /> Drink my liquor<br /> From an old fruitjar.</p> <p>Do anything that you want to do, but uh-uh,<br /> Honey, lay off of my shoes<br /> Dont you step on my blue suede shoes.<br /> You can do anything but lay off of my blue suede shoes.</p> </div> <div class="on" id="houndDog"> <h2>Hound Dog</h2> <p>You aint nothin but a hound dog<br /> Cryin all the time.<br /> You aint nothin but a hound dog<br /> Cryin all the time.<br /> Well, you aint never caught a rabbit<br /> And you aint no friend of mine.</p> <p>When they said you was high classed,<br /> Well, that was just a lie.<br /> When they said you was high classed,<br /> Well, that was just a lie.<br /> You aint never caught a rabbit<br /> And you aint no friend of mine.</p> </div> <div id="dontBeCruel"> <h2>Don't Be Cruel</h2> <p>You know I can be found,<br /> Sitting home all alone,<br /> If you cant come around,<br /> At least please telephone.<br /> Dont be cruel to a heart thats true.</p> <p>Baby, if I made you mad<br /> For something I might have said,<br /> Please, lets forget the past,<br /> The future looks bright ahead,<br /> Dont be cruel to a heart thats true.<br /> I dont want no other love,<br /> Baby its just you Im thinking of.</p> <p>Dont stop thinking of me,<br /> Dont make me feel this way,<br /> Come on over here and love me,<br /> You know what I want you to say.<br /> Dont be cruel to a heart thats true.<br /> Why should we be apart?<br /> I really love you baby, cross my heart.</p> <p>Lets walk up to the preacher<br /> And let us say I do,<br /> Then youll know youll have me,<br /> And Ill know that Ill have you,<br /> Dont be cruel to a heart thats true.<br /> I dont want no other love,<br /> Baby its just you Im thinking of.</p> <p>Dont be cruel to a heart thats true.<br /> Dont be cruel to a heart thats true.<br /> I dont want no other love,<br /> Baby its just you Im thinking of.</p> </div> <div id="teddyBear"> <h2>Teddy Bear</h2> <p>Baby let me be,<br /> Your lovin teddy bear<br /> Put a chain around my neck,<br /> And lead me anywhere<br /> Oh let me be<br /> Your teddy bear.</p> <p>I dont wanna be a tiger<br /> Cause tigers play too rough<br /> I dont wanna be a lion<br /> cause lions aint the kind<br /> You love enough.<br /> Just wanna be, your teddy bear<br /> Put a chain around my neck<br /> And lead me anywhere<br /> Oh let me be<br /> Your teddy bear.</p> <p>Baby let me be, around you every night<br /> Run your fingers through my hair,<br /> And cuddle me real tight.</p> </div></div></body></html>希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
