1. 程式人生 > >Bootstrap 外掛-可切換導航欄

Bootstrap 外掛-可切換導航欄

  • 可切換導航欄



    <!DOCTYPE html>
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <body>
    <style>
    p{
     
      margin-left:10px;
      margin-top:10px;
    }
    </style>
    <ul id="myTab" class="nav nav-tabs">
       <li class="active">
          <a href="#dota" data-toggle="tab">
             DotA
          </a>
       </li>
       <li><a href="#lol" data-toggle="tab">英雄聯盟</a></li>
       <li class="dropdown">
          <a href="#" id="myTabDrop1" class="dropdown-toggle"
             data-toggle="dropdown">其他類似遊戲
             <b class="caret"></b>
          </a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
             <li><a href="#storm" tabindex="-1" data-toggle="tab">風暴英雄</a></li>
             <li><a href="#h300" tabindex="-1" data-toggle="tab">300英雄</a></li>
          </ul>
       </li>
    </ul>
    <div id="myTabContent" class="tab-content">
       <div class="tab-pane fade in active" id="dota">
          <p>《DotA》(Defense of the Ancients),可以譯作守護古樹、守護遺蹟、遠古遺蹟守衛, 是由暴雪公司出品即時戰略遊戲《魔獸爭霸3》的一款多人即時對戰、自定義地圖,可支援10個人同時連線遊戲,是暴雪公司官方認可的魔獸爭霸的RPG地圖。</p>
       </div>
       <div class="tab-pane fade" id="lol">
          <p>《英雄聯盟》(簡稱lol)是由美國Riot Games開發,中國大陸地區由騰訊遊戲運營的網路遊戲。</p>
       </div>
       <div class="tab-pane fade" id="storm">
          <p>
          《風暴英雄》 是由暴雪娛樂公司開發的一款執行在Windows和Mac OS上的線上多人競技PC遊戲。</p>
           <p> 遊戲中的英雄角色主要來自於暴雪三大經典遊戲系列:《魔獸世界》、《暗黑破壞神》和《星際爭霸》。它是一款道具收費的遊戲,與《星際爭霸Ⅱ》基於同一引擎開發。
          </p>
       </div>
       <div class="tab-pane fade" id="h300">
          <p>《300英雄》是由上海跳躍網路科技有限公司自主研發,深圳中青寶互動網路股份有限公司運營的一款類DOTA網遊。遊戲以7v7組隊對抗玩法為主,提供永恆戰場和永恆競技場兩種經典模式任由玩家選擇,並創新性地加入勇者鬥惡龍、克隆戰爭等多種休閒娛樂玩法。
          </p>
       </div>
    </div>
     
    <div style="height:200px"></div>