JS實現選項卡效果的代碼實例-創新互聯

選項卡這個效果估計以后的項目會經常涉及到，對代碼還是半熟練的情況下還是寫下來吧。
先來布局一個簡單的頁面：

專注于為中小企業提供網站建設、成都網站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業大石橋免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了上1000+企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      *{margin: 0;padding: 0;list-style: none;}
      #box{margin: 50px;}
      #box li{width: 100px;height: 40px;line-height: 40px;text-align: center;background-color: #d8d8d8;margin-right: 2px;float: left;}
      #box .active{background: red;}
      #content{clear: both;}
      #content div{width: 404px;height: 200px;border: 1px solid #d8d8d8;display: none;}
    </style>
  </head>
  <body>
    <div id="box">
      <!--這個ul為選項卡的菜單，提供選擇項，并且設置其中一個li為默認樣式-->
      <ul>
        <li class="active">新聞</li>
        <li>社會</li>
        <li>科技</li>
        <li>娛樂</li>
      </ul>
      <!--這個div為選項卡的內容，顯示不同菜單的不同內容，并且設置其中一個div為可見，其他隱藏-->
      <div id="content">
        <div >新聞</div>
        <div>社會</div>
        <div>科技</div>
        <div>娛樂</div>
      </div>
    </div>
  </body>
</html>

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文名稱：JS實現選項卡效果的代碼實例-創新互聯
路徑分享：http://newbst.com/article34/dihjse.html

成都網站建設公司_創新互聯，為您提供建站公司、Google、品牌網站建設、手機網站建設、關鍵詞優化、域名注冊

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

JS實現選項卡效果的代碼實例-創新互聯