溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
- <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3等等"/>
- <title>網頁選項卡</title>
- <style type="text/css">
- body,ul,li{margin:0; padding:0; list-style:none;}
- .wrap{width:300px; height:200px; margin:10px auto; border:1px solid #000; padding:10px;}
- .tab_menu{clear:both; margin-top:10px;}
- .tab_box{clear:both;}
- ul li{float:left; width:60px; height:30px; line-height:30px; text-align:center; margin-right:10px; pink;} < /span>
- .selected{background:#999;}
- .tab_box div{height:150px; border:1px solid #f00;}
- .hid{display:none;}
- .hover{background:#f00;}
- </style>
- <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
- <script type="text/javascript">
- $(function(){
- var $div_li=$("div.tab_menu ul li");
- $div_li.click(function(){
- $(this).addClass("selected")
- .siblings().removeClass("selected");
- var index=$div_li.index(this);//獲取當前單擊的li在全部li中的索引
- $("div.tab_box>div")
- .eq(index).show() //顯示li元素對應的div元素
- .siblings().hide();
- }).hover(function(){//添加鼠標劃入劃出效果
- $(this).addClass("hover");
- },function(){
- $(this).removeClass("hover");
- })
- })
- </script>
- </head>
- <body>
- <div class="wrap">
- <div class="tab_menu">
- <ul>
- <li class="selected">時事</li>
- <li>體育</li>
- <li>娛樂</li>
- </ul>
- </div>
- <div class="tab_box">
- <div>時事</div>
- <div class="hid">體育</div>
- <div class="hid">娛樂</div>
- </div>
- </div>
- </body>
- </html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
