&

【WEB開發】css3和Jquery實現選項卡效果

admin
2025年7月16日 23:51 本文熱度 285
內容轉自博客https://www.cnblogs.com/scc-/p/9507645.html
1.源碼
<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <style type="text/css">        *{margin:0px;padding:0px;}        .tabbox{margin:10px;}        .tabbox ul{list-style:none;display:table;}        .tabbox ul li{float:left;width:100px;line-height:30px;padding-left:8px;border:1px solid #aaccff;margin-right:-1px;cursor:pointer;}        .tabbox ul li.active{background-color:#e73839;color:white;font-weight:bold;}        .tabbox .content{border:1px solid #aaccff;padding:10px;}        .tabbox .content>div{display:none;}        .tabbox .content>div.active{display:block;}        </style>    </head>    <body>        <ol>        <li>使用jquery實現選項卡切換效果</li>        <li>要求：2組選項卡相互不影響</li>        </ol>        <div class="tabbox">        　　<ul>        　　　　<li>選項卡一</li>        　　　　<li class="active">選項卡二</li>        　　　　<li>選項卡三</li>        　　　　<li>選項卡四</li>        　　</ul>        <div class="content">        　　<div>        　　　　<div>asdfasdfasdfasdfasdfasdfa</div>        　　</div>        <div class="active">        　　<div>asdfasdfasdfasdfasdf</div>        </div>        　　<div>33333333333</div>        　　　　<div>44444444</div>        　　</div>        </div>        <div class="tabbox">        　　<ul>        　　　　<li>選項卡一</li>        　　　　<li class="active">選項卡二</li>        　　　　<li>選項卡三</li>        　　　　<li>選項卡四</li>        　　</ul>        <div class="content">        　　<div>        　　　　<div>555555555</div>        　　</div>        <div class="active">        　　<div>66666666666</div>        </div>        　　<div>7777777777777</div>        　　<div>8888888888888</div>        　　</div>        </div>        　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>        <script type="text/javascript">        $(function ()        {        　　$(".tabbox li").mouseover(function ()        　　{        　　　　//獲取點擊的元素給其添加樣式，講其兄弟元素的樣式移除        　　　　$(this).addClass("active").siblings().removeClass("active");        　　　　//獲取選中元素的下標        　　　　var index = $(this).index();               console.log(index);        　　　　$(this).parent().siblings().children().eq(index).addClass("active")        　　　　.siblings().removeClass("active");        　　});        });        </script>    </body></html>
2.運行效果
閱讀原文：原文鏈接
該文章在 2025/7/18 10:25:53 編輯過
關鍵字查詢
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。