首頁 > 開發者 > JavaScript

原生javascript學習：網頁換膚

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

01 <!DOCTYPE html>
02 <html>
03 <head>
04 
05 <style>
06 body,ul,li {margin:0;padding:0;}
07 li {list-style-type:none;}
08 a:link, a:visited {text-decoration:none;}
09 a: hover {text-decoration:underline;}
10 #outer {width:500px;margin:0px auto;overflow:hidden;zoom:1;}
11 #skin, #nav {overflow:hidden;zoom:1;}
12 #skin {margin:10px 0;}
13 #skin li {float:left;width:6px;height:6px;cursor:pointer;overflow:hidden;margin-right:10px;text-indent:-9999px;border-width:4px;border-style:solid;}
14 #skin li.current {background:#fff!important;}
15 #red {border-color:red;background:red;}
16 #green {border-color:green;background:green;}
17 #black {border-color:black;background:black;}
18 #nav {border:1px solid #fff;}
19 #nav li {float:left;width:82px;line-height:25px;text-align:center;border-right:1px solid #fff;}
20 #nav li.last {width:83px;border-right-width:0px;}
21 #nav li a {color:#fff;display:block;}
22 </style>
23 
24 <link href="green.css" rel="stylesheet" type="text/css">
25 
26 <script>
27 window.onload = function() {
28     var oLink = document.getElementsByTagName("link")[0];
29     var oSkin = document.getElementById("skin").getElementsByTagName("li");
30     
31     for(var i = 0; i < oSkin.length; i++) {
32         oSkin[i].onclick = function() {
33             for (var p in oSkin) oSkin[p].className = "";
34             this.className = "current";
35             oLink['href'] = this.id + ".css";
36         }
37     }
38 };
39 </script>
40 
41 </head>
42 <body>
43 <div id="outer">
44     <ul id="skin">
45         <li id="red" title="紅色">紅</li>
46         <li id="green" class="current" title="綠色">綠</li>
47         <li id="black" title="黑色">黑</li>
48     </ul>
49     
50     <ul id="nav">
51         <li><a href="#">新聞</a></li>
52         <li><a href="#">娛樂</a></li>
53         <li><a href="#">體育</a></li>
54         <li><a href="#">電影</a></li>
55         <li><a href="#">音樂</a></li>
56         <li class="last"><a href="#">旅遊</a></li>
57     </ul>
58 </div>
59 </body>
60 </html>

 

作者：黎宇浩

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More