快捷導(dǎo)航

jQuery簡單實現(xiàn)網(wǎng)頁選項卡特效

更新時間：2014年11月24日 11:08:00 投稿：hebedich

本文給大家分享一段基于jQuery簡單實現(xiàn)的網(wǎng)頁選項卡代碼，非常簡單實用，這里推薦給小伙伴們。

CSS：

        .clear{clear:both; height:0px; overflow:hidden;} 

        .tab{width:400px; font-size:12px;} 

        .tab_menu ul{padding:0px;margin:0px;} 

        .tab_menu li{list-style:none; display:block; float:left; 

            background:#C2CEFE; height:22px; line-height:22px; 

            padding: 0px 8px; margin-right:6px; border:#86B4CA 1px solid; 

        } 

        .box{width:400px; height:200px; overflow:hidden; border:#A8C9D9 1px solid; padding:10px 8px; } 

        .tab_menu ul li.selected{background:#dadada; cursor:pointer; } 

        .hide{display:none;}

jQuery：

復(fù)制代碼代碼如下:

        $(function() { 

            var $menu_li = $("div.tab_menu ul li");  //選取網(wǎng)頁選項卡 

            $menu_li.click(function(){ 

                $(this).addClass("selected") //當(dāng)前<li>高亮 

                        .siblings().removeClass("selected"); //去掉其它同輩<li>的高亮 

                var index = $menu_li.index( $(this) ); //找到<li>子節(jié)點的索引 

                $("div.tab_box > div").eq(index).show() //索引為N的DIV顯示出來 

                        .siblings().hide();            //其它的選項卡隱藏 

            }) 

        })

html：

復(fù)制代碼代碼如下:

 <div class="tab"> 

    <div class="tab_menu"> 

        <ul> 

            <li class="selected">個人信息</li> 

            <li class="selected">我的照片</li> 

            <li class="selected">我的博客</li> 

            <div class="clear"></div> 

        </ul> 

    </div> 

    <div class="tab_box"> 

        <div class="box">我的QQ:123456</div> 

        <div class="box hide">hi </div> 

        <div class="box hide"> hello <br> </div> 

    </div> 

</div>

您可能感興趣的文章:

相關(guān)文章

jQuery實現(xiàn)鼠標(biāo)滑過商品小圖片上顯示對應(yīng)大圖片功能【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)鼠標(biāo)滑過商品小圖片上顯示對應(yīng)大圖片功能,涉及jQuery事件響應(yīng)、元素遍歷及屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2018-04-04
jquery通過select列表選擇框?qū)Ρ砀駭?shù)據(jù)進行過濾示例
這篇文章主要介紹了jquery通過select列表選擇框?qū)Ρ砀駭?shù)據(jù)進行過濾示例,需要的朋友可以參考下
2014-05-05
jquery實現(xiàn)簡單Tab切換菜單效果
這篇文章主要介紹了jquery實現(xiàn)簡單Tab切換菜單效果的相關(guān)資料,需要的朋友可以參考下
2016-06-06
認(rèn)識jQuery的Promise的具體使用方法
本篇文章主要介紹了認(rèn)識jQuery的Promise的具體使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
jQuery組件easyui基本布局實現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery easyui基本布局實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
jQuery使用Selectator插件實現(xiàn)多選下拉列表過濾框(附源碼下載)
Selectator是一款實現(xiàn)多選和搜索過濾功能的jQuery下拉列表框插件。下文給大家介紹jQuery使用Selectator插件實現(xiàn)多選下拉列表過濾框，需要的朋友一起學(xué)習(xí)吧
2016-04-04
ASP.NET jQuery 實例2 (表單中使用回車在TextBox之間向下移動)
每次當(dāng)用戶在一個文本框輸入完數(shù)據(jù)后，更希望在敲入回車鍵后，焦點會自動移動到下一個文本框
2012-01-01
Jquery+Ajax實現(xiàn)跨域訪問
這篇文章介紹了Jquery實現(xiàn)Ajax跨域訪問的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-05-05
關(guān)于jquery.validate1.9.0前臺驗證的使用介紹
本篇文章介紹了，關(guān)于jquery.validate1.9.0前臺驗證的使用。需要的朋友參考下
2013-04-04
jQuery學(xué)習(xí)總結(jié)之元素的相對定位和選擇器(持續(xù)更新)
jQuery中不僅可以使用選擇器就行絕對定位，而且還可以進行相對定位，只要在$()中指定第二個參數(shù)，第二個參數(shù)就是相對的元素。第二個參數(shù)傳遞一個jQuery對象，則相對于這個對象為基準(zhǔn)進行相對的選擇。
2011-04-04