在各種各樣的網站中，選項卡效果都是經常見到的，在這裡用簡單的jquery佈局一個小的選項卡案例。 HTML代碼： jq代碼： ...
在各種各樣的網站中，選項卡效果都是經常見到的，在這裡用簡單的jquery佈局一個小的選項卡案例。
HTML代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>歡迎學習前端</title> 6 <style> 7 *{margin:0;padding:0;} 8 a{color:black;text-decoration:none;} 9 ul li {list-style: none;padding-left: 5px;width:100px;height:30px;} 10 .showys{background:#E3CE12;} 11 .top{width:500px;height:30px;background:orange;margin:auto;margin-top: 10px;} 12 .message{width:500px;height:300px;margin:auto;} 13 .left{width:100px;height:300px;background:green;float:left;} 14 .middle div{width:300px;height:300px;background:yellow;float:left;display: none;} 15 .middle .show{width:300px;height:300px;background:yellow;float:left;display: block;} 16 .middle p{text-indent:2em;margin:10px;} 17 .right{width:100px;height:300px;background:green;float:right;} 18 .footer{width:500px;height:30px;background:red;margin:auto;} 19 .footer,.top p{text-align: center;line-height: 30px;cursor:pointer;} 20 </style> 21 </head> 22 <body> 23 <div class="top"> 24 <p>歡迎學習前端</p> 25 </div> 26 <div class="message"> 27 <div class="left"> 28 <ul> 29 <li class="showys"><a href="#">html</a></li> 30 <li><a href="#">css</a></li> 31 <li><a href="#">javascript</a></li> 32 </ul> 33 </div> 34 <div class="middle"> 35 <div class="show"> 36 <p>HTML:超文本標記語言(Hyper Text Markup Language)，標準通用標記語言下的一個應用。HTML 不是一種編程語言，而是一種標記語言 (markup language)，是網頁製作所必備的。“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程式等非文字元素。超文本標記語言(或超文本標簽語言)的結構包括“頭”部分和“主體”部分，其中“頭”部提供關於網頁的信息，“主體”部分提供網頁的具體內容。</p> 37 </div> 38 <div> 39 <p>css:層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的電腦語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。 40 </p> 41 </div> 42 <div> 43 <p>JS:JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML(標準通用標記語言下的一個應用)網頁上使用，用來給HTML網頁增加動態功能。 44 </p> 45 </div> 46 </div> 47 <div class="right"> 48 </div> 49 </div> 50 <div class="footer"> 51 <p>Copyright © w3cschool.cn</p> 52 </div> 53 <script src="jquery-1.12.0.min.js"></script> 54 </body> 55 </html>
jq代碼：
1 $(document).ready(function(){ 2 3 $("ul>li").mouseenter(function () { 4 5 $(this).addClass("showys"); 6 7 $(this).siblings().removeClass('showys'); 8 9 var index=$(this).index(); 10 11 var $div=$(".middle div").eq(index); 12 13 $div.siblings().removeClass("show"); 14 15 $div.addClass("show"); 16 17 }); 18 19 })
