显示当前状态的导航

<!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>Dynamic Navigation with CSS and Javascript: Example 7</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”>Heartbreak Hotel</a></li>
?<li><a onclick=”applySelectedTo(this);return false;” href=”#blueSuedeShoes”>Blue Suede Shoes</a></li>
?<li><a onclick=”applySelectedTo(this);return false;” href=”#houndDog” class=”selected”>Hound Dog</a></li>
?<li><a onclick=”applySelectedTo(this);return false;” href=”#dontBeCruel”>Don’t Be Cruel</a></li>
?<li><a onclick=”applySelectedTo(this);return false;” href=”#teddyBear”>Teddy Bear</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>

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 显示当前状态的导航

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏