jquery實現(xiàn)tab菜單切換內(nèi)容(精簡版demo)

更新時間：2023年10月08日 09:51:08 作者：Winn

這篇文章主要為大家介紹了jquery實現(xiàn)tab菜單切換內(nèi)容的精簡方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

效果預(yù)覽

完整代碼

<!DOCTYPE?html>  
<html>  
<head>  
<title>jquery實現(xiàn)tab菜單切換內(nèi)容（精簡版）</title>  
<script?src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>  
</head>  
<body>  
<!--?這是菜單?-->  
<div>  
 <span?style="background-color:?red;cursor:?pointer;"?list="0"?onclick="tab(this)"?>我是A</span>  
 <span?style="background-color:?blue;cursor:?pointer;"?list="1"?onclick="tab(this)"?>我是B</span>  
 <span?style="background-color:?orange;cursor:?pointer;"?list="2"?onclick="tab(this)"?>我是C</span>  
 <span?style="background-color:?green;cursor:?pointer;"?list="3"?onclick="tab(this)"?>我是D</span>  
 </div>  
 <!--?這是菜單對應(yīng)的內(nèi)容?-->  
 <div?class="content">  
 <div?style="background-color:?red"?onclick="cont(this)">我是A的內(nèi)容</div>  
 <div?style="background-color:?blue;display:?none"???onclick="cont(this)"?>我是B的內(nèi)容</div>  
 <div?style="background-color:?orange;display:?none"?onclick="cont(this)"?>我是C的內(nèi)容</div>  
 <div?style="background-color:?green;display:?none"??onclick="cont(this)"?>我是D的內(nèi)容</div>  
 </div>  
 </body>  
 </html>  
 <script?type="text/javascript">  
 ????//點(diǎn)擊菜單執(zhí)行函數(shù)  
? ???function?tab(param)?{  
? ???????var?sp_an=$(param).attr('list');//獲取被點(diǎn)擊菜單的list屬性值（0,1,2,3）  
? ???????$('.content').children('div').eq(sp_an).click();//點(diǎn)擊菜單后，對應(yīng)的內(nèi)容被點(diǎn)擊，從而實現(xiàn)展示  
? ???????//使用click()方法模擬點(diǎn)擊事件，觸發(fā)下面的cont函數(shù)  
 ??????}  
? ???//這個函數(shù)的觸發(fā)是通過點(diǎn)擊菜單的時候觸發(fā)的  
? ???function?cont(param){  
? ???????$(param).show();//被選中的內(nèi)容顯示  
? ???????$(param).siblings().hide();//沒有被選中的內(nèi)容隱藏  
? ???}  
 </scrip