jquery選項卡效果
阿新 • • 發佈：2018-10-03
不同 ide src ati ucs line asc ie6 菜單
效果圖：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../jquery-1.12.4.js"></script> <script type="text/javascript"></script> <style> *{ margin: 0; padding: 0; } body{ padding: 100px 30%; } ul{ list-style: none; height: 30px; line-height: 30px; } li{ float: left; width: 100px; background: url("bg_1.png") repeat-x; border:1px solid #A1AFB9; border-bottom: none; margin-right: 5px; text-align: center; cursor: pointer; position: relative;/*解決ie67存在的兼容問題*/ } .content{ width: 400px; border: 1px solid #A1AFB9; padding: 10px; height: 145px; } li.one{ background: #fff; } li:hover{ background: url("bg_3.png") repeat-x; } </style> <script> $(function () { $(".content div:gt(0)").hide(); $("li").click(function () { $(this).addClass("one").siblings().removeClass("one"); var index = $("li").index(this); $(‘.content div‘).eq(index).show().siblings().hide(); }) }) </script> </head> <body> <div class="optionCard"> <ul> <li class="one">菜單1</li> <li>菜單2</li> <li>菜單3</li> </ul> <div class="content"> <div>隨著移動互聯網的興起，互聯網行業正向更加智能化的Web3.0時代邁進，中國互聯網行業進入了高速發展的勢態，PHP語言已經為大部分企業廣泛應用和重視（如：新浪、百度、騰訊、TOM、淘寶、搜狐、網易等）PHP語言是各大IT公司首選的互聯網編程語言。PHP開發優勢明顯，未來發展空間巨大，IT行業急需PHP開發人才。 </div> <div>實際上Internet表示的意思是互聯網，又稱網際網路，根據音譯也被叫做因特網、英特網，是網絡與網絡之間所串連成的龐大網絡，這些網絡以一組通用的協議相連，形成邏輯上的單一且巨大的全球化網絡，在這個網絡中有交換機、路由器等網絡設備、各種不同的連接鏈路、種類繁多的服務器和數不盡的計算機、終端。使用互聯網可以將信息瞬間發送到千裏之外的人手中，它是信息社會的基礎。</div> <div>因特網始於1969年的美國。是美軍在ARPA（阿帕網，美國國防部研究計劃署）制定的協定下，首先用於軍事連接，後將美國西南部的加利福尼亞大學洛杉磯分校、斯坦福大學研究學院、UCSB（加利福尼亞大學）和猶他州大學的四臺主要的計算機連接起來。這個協定由劍橋大學的BBN和MA執行，在1969年12月開始聯機。</div> </div> </div> </body> </html>
jquery選項卡效果