js實(shí)現(xiàn)顯示當(dāng)前狀態(tài)的導(dǎo)航效果代碼
本文實(shí)例講述了js實(shí)現(xiàn)顯示當(dāng)前狀態(tài)的導(dǎo)航效果代碼。分享給大家供大家參考。具體如下:
這里演示顯示當(dāng)前狀態(tài)的導(dǎo)航,鼠標(biāo)點(diǎn)擊左側(cè)的導(dǎo)航菜單,右側(cè)的內(nèi)容就會(huì)變換,實(shí)際上是一個(gè)豎向的TAB選項(xiàng)卡,作為菜單來(lái)用的話,它正好可以顯示當(dāng)前的菜單位置,比較經(jīng)典。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/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>顯示當(dāng)前狀態(tài)的導(dǎo)航</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">世界七星級(jí)賓館</a></li> <li><a onclick="applySelectedTo(this);return false;" href="#blueSuedeShoes">藍(lán)色夢(mèng)想</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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- 頂部緩沖下拉菜單導(dǎo)航特效的JS代碼
- js實(shí)現(xiàn)改進(jìn)的仿藍(lán)色論壇導(dǎo)航菜單效果代碼
- 基于dropdown.js實(shí)現(xiàn)的兩款美觀大氣的二級(jí)導(dǎo)航菜單
- js實(shí)現(xiàn)仿愛(ài)微網(wǎng)兩級(jí)導(dǎo)航菜單效果代碼
- js實(shí)現(xiàn)橫向伸展開(kāi)的二級(jí)導(dǎo)航菜單代碼
- JS實(shí)現(xiàn)自動(dòng)切換文字的導(dǎo)航效果代碼
- JS實(shí)現(xiàn)靈巧的下拉導(dǎo)航效果代碼
- js實(shí)現(xiàn)的黑背景灰色二級(jí)導(dǎo)航菜單效果代碼
- js+css實(shí)現(xiàn)超簡(jiǎn)潔的二級(jí)下拉菜單效果代碼
- js實(shí)現(xiàn)全國(guó)省份城市級(jí)聯(lián)下拉菜單效果代碼
- js實(shí)現(xiàn)兼容性好的微軟官網(wǎng)導(dǎo)航下拉菜單效果
相關(guān)文章
js實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01使用canvas修改二維碼顏色的實(shí)現(xiàn)過(guò)程
二維碼作為現(xiàn)代信息傳遞的重要工具,其黑白色調(diào)一直是其標(biāo)志性特征,然而,有時(shí)我們可能希望個(gè)性化定制二維碼的顏色,以適應(yīng)特定設(shè)計(jì)需求或提高可識(shí)別性,在這篇文章中,我們將深入探討如何使用Canvas技術(shù)修改二維碼的顏色,為二維碼添加更多創(chuàng)意和個(gè)性2023-11-11JavaScript遍歷json對(duì)象數(shù)據(jù)的方法
這篇文章介紹了JavaScript遍歷json對(duì)象數(shù)據(jù)的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-04-04超輕量級(jí)的js時(shí)間庫(kù)miment使用解析
這篇文章主要介紹了超輕量級(jí)的js時(shí)間庫(kù)miment使用解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08JavaScript樹(shù)型數(shù)據(jù)與一維數(shù)組相互轉(zhuǎn)換方式
這篇文章主要介紹了JavaScript樹(shù)型數(shù)據(jù)與一維數(shù)組相互轉(zhuǎn)換方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06js實(shí)現(xiàn)跨域的幾種方法匯總(圖片ping、JSONP和CORS)
平時(shí)用慣了jQuery.ajax之類的方法,卻時(shí)常忽略了它背后的實(shí)現(xiàn),本文是學(xué)習(xí)了AJAX基礎(chǔ)及幾種跨域解決方案之后的一些收獲。2015-10-10基于JS實(shí)現(xiàn)視頻上傳顯示進(jìn)度條
這篇文章主要介紹了基于JS實(shí)現(xiàn)視頻上傳顯示進(jìn)度條,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05JavaScript通過(guò)字符串調(diào)用函數(shù)的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript通過(guò)字符串調(diào)用函數(shù)的實(shí)現(xiàn)方法,實(shí)例分析了javascript動(dòng)態(tài)調(diào)用函數(shù)的技巧,需要的朋友可以參考下2015-03-03