<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /> <style type="text/css"> div,ul,li,a { margin:0; padding:0; } ul,li { list-style:none; } body { font-size:14px; background-color:#f7f7f7; } a { color:#666; text-decoration:none; } a:hover { color:#F60; } #title li { float:left; //margin-right:20px; padding:5px; border:1px solid #dedede; background:#FFF; //width:50px; text-align:center; height:28px; line-height:28px; position:relative; z-index:1000; } #title,#wrap { clear:both; background-color:#FFF; width:300px; } #wrap { border:1px solid #dedede; height:300px; position:relative; top:-1px; padding:10px; } #wrap>div { display:none; height:100%; overflow:auto; } #wrap .active { display:block; } #title .ho { border-bottom:1px solid #FFF; background:red; } #title .ho a { color:white; } </style> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script type='text/javascript'> $(function() { function tab(pa) { $(pa + ".title li").click(function() { //找到是點擊第幾個 var ind = $(pa + "#title li").index($(this)); //alert(ind); //以前顯示的隱藏 $(pa + ".wrap div:visible").hide(); //第幾個顯示 $(pa + ".wrap div:eq(" + ind + ")").show(); //有高亮ho 去掉高亮ho $(pa + ".title li.ho").removeClass("ho"); //被點擊的元素添加ho $(this).addClass("ho"); }) //clicked } //tab ed tab(".tab1 "); $("#btnOK").click(function(){alert('ok')}); $("#btnCancel").click(function(){alert('cancel')}); }) </script> </head> <body> <div class="tab1" style="margin:100px;"> <ul id="title" class="title"> <li class="ho"><a href="javascript:void(0)">話費ggggg</a></li> <li><a href="javascript:void(0)">游戲</a></li> <li><a href="javascript:void(0)">旅行xxxx</a></li> <li><a href="javascript:void(0)">保險</a></li> </ul> <div id="wrap" class="wrap"> <div class="active"> this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1 </div> <div> this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br> </div> <div> this is con3</div> <div>this is con4</div> </div> </div> <div style="height:400px;width:400px;margin:100px;background-color:#FFF;"> <ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#home" data-toggle="tab"> 菜鳥教程 </a> </li> <li><a href="#ios" data-toggle="tab">iOS</a></li> <li><a href="#jmeter" data-toggle="tab">jmeter</a></li> <li><a href="#ejb" data-toggle="tab">ejb</a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home" style="padding:5;"> <p>菜鳥教程是一個提供最新的web技術站點，本站免費提供了建站相關的技術文檔，幫助廣大web技術愛好者快速入門並建立自己的網站。菜鳥先飛早入行——學的不僅是技術，更是夢想。</p> </div> <div class="tab-pane fade" id="ios"> <p>iOS 是一個由蘋果公司開發和發布的手機操作系統。最初是於 2007 年首次發布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 操作系統是用在蘋果電腦上，iOS 是蘋果的移動版本。</p> </div> <div class="tab-pane fade" id="jmeter"> <p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序，用於負載和性能測試。</p> </div> <div class="tab-pane fade" id="ejb"> <p>Enterprise Java Beans（EJB）是一個創建高度可擴展性和強大企業級應用程序的開發架構，部署在兼容應用程序服務器（比如 JBOSS、Web Logic 等）的 J2EE 上。 </p> </div> </div> </div> </body> </html>