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

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

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

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)頁(yè)選項(xiàng)卡 

            $menu_li.click(function(){ 

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

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

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

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

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

            }) 

        })

html：

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

 <div class="tab"> 

    <div class="tab_menu"> 

        <ul> 

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