jquery多選項(xiàng)卡效果實(shí)例代碼(附效果圖)
<script type="text/javascript">
$(function() {
$(".designerspanel").each(function(){
$(this).find(".tabspanel #show:not(:first)").hide();
});
$(".designerspanel li").click(function(){
idname=$(this).parents('.designerspanel').attr('id');
current=$("#"+idname+" li:eq(0)").attr('class');
current=current.replace("black","");
$("#"+idname+" li").addClass("black");
$(this).removeClass("black").addClass(current);
$("#"+idname+" #show").hide();
$("#"+idname+" #show").eq($("#"+idname+" li").index(this)).show();
}).css("cursor", "pointer");
})
</script>
附上html代碼
<div class="designerspanel" id="AG">
<a name="AG"></a>
<div class="wordtitle">Designer Name Order A to G</div>
<div class="tabspanel">
<ul>
<li class="red"><span>Designer Name A</span></li>
<li class="black"><span>Designer Name B</span></li>
<li class="black"><span>Designer Name C</span></li>
<li class="black"><span>Designer Name D</span></li>
<li class="black"><span>Designer Name E</span></li>
<li class="black"><span>Designer Name F</span></li>
<li class="black"><span>Designer Name G</span></li>
</ul>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$A item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage1"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$B item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage1"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$C item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage1"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$D item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage1"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$E item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage1"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$F item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage1"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$G item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage1"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
</div>
</div>
<div class="designerspanel" id="HN">
<a name="HN"></a>
<div class="wordtitle">Designer Name Order H to N</div>
<div class="tabspanel">
<ul>
<li class="blue"><span>Designer Name H</span></li>
<li class="black"><span>Designer Name I</span></li>
<li class="black"><span>Designer Name J</span></li>
<li class="black"><span>Designer Name K</span></li>
<li class="black"><span>Designer Name L</span></li>
<li class="black"><span>Designer Name M</span></li>
<li class="black"><span>Designer Name N</span></li>
</ul>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$H item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage2"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$I item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage2"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$J item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage2"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$K item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage2"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$L item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage2"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$M item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage2"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$N item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage2"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
</div>
</div>
<div class="designerspanel" id="OT">
<a name="OT"></a>
<div class="wordtitle">Designer Name Order O to T</div>
<div class="tabspanel">
<ul>
<li class="he"><span>Designer Name O</span></li>
<li class="black"><span>Designer Name P</span></li>
<li class="black"><span>Designer Name Q</span></li>
<li class="black"><span>Designer Name R</span></li>
<li class="black"><span>Designer Name S</span></li>
<li class="black"><span>Designer Name T</span></li>
</ul>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$O item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage3"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$P item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage3"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$Q item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage3"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$R item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage3"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$S item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage3"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$T item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage3"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
</div>
</div>
<div class="designerspanel" id="UZ">
<a name="UZ"></a>
<div class="wordtitle">Designer Name Order U to Z</div>
<div class="tabspanel">
<ul>
<li class="qing"><span>Designer Name U</span></li>
<li class="black"><span>Designer Name V</span></li>
<li class="black"><span>Designer Name W</span></li>
<li class="black"><span>Designer Name X</span></li>
<li class="black"><span>Designer Name Y</span></li>
<li class="black"><span>Designer Name Z</span></li>
</ul>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$U item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage4"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$V item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage4"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$W item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage4"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$X item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage4"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$Y item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage4"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
<div id="show">
<div class="namespanel">
<div class="namespaneltip"></div>
<div class="designernamelist">
<!--{foreach from=$Z item=i}-->
<a href="#">{$i.user_name}</a>
<!--{/foreach}-->
</div>
<div class="namespanelpage4"></div>
</div>
<div class="imgspanel"></div>
<div class="imgspanel"></div>
</div>
</div>
</div>
頁(yè)面效果：
頁(yè)面比較雜亂，你可以看到很多選項(xiàng)卡，而且有多個(gè)選項(xiàng)卡，點(diǎn)擊每個(gè)選項(xiàng)，內(nèi)容發(fā)生變化，而且顏色也改變。
- jquery tools之tabs 選項(xiàng)卡/頁(yè)簽
- JQuery Tab選項(xiàng)卡效果代碼改進(jìn)版
- 基于JQuery的6個(gè)Tab選項(xiàng)卡插件
- jQuery EasyUI API 中文文檔 - Tabs標(biāo)簽頁(yè)/選項(xiàng)卡
- jQuery自動(dòng)切換/點(diǎn)擊切換選項(xiàng)卡效果的小例子
- 實(shí)用的Jquery選項(xiàng)卡TAB示例代碼
- jquery自動(dòng)切換tabs選項(xiàng)卡的具體實(shí)現(xiàn)
- js/jQuery簡(jiǎn)單實(shí)現(xiàn)選項(xiàng)卡功能
- jQuery之選項(xiàng)卡的簡(jiǎn)單實(shí)現(xiàn)
- jquery實(shí)現(xiàn)具有嵌套功能的選項(xiàng)卡
相關(guān)文章
使用jquery動(dòng)態(tài)加載js文件的方法
這篇文章主要介紹了使用jquery動(dòng)態(tài)加載js文件的方法,需要的朋友可以參考下2014-12-12
JQuery的AJAX實(shí)現(xiàn)文件下載的小例子
JQuery的ajax函數(shù)的返回類型只有xml、text、json、html等類型，沒(méi)有“流”類型，所以我們要實(shí)現(xiàn)ajax下載，不能夠使用相應(yīng)的ajax函數(shù)進(jìn)行文件下載。但可以用js生成一個(gè)form，用這個(gè)form提交參數(shù)，并返回“流”類型的數(shù)據(jù)。在實(shí)現(xiàn)過(guò)程中，頁(yè)面也沒(méi)有進(jìn)行刷新2013-05-05
淺談jQuery animate easing的具體使用方法(推薦)
下面小編就為大家?guī)?lái)一篇淺談jQuery animate easing的具體使用方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
jQuery.validate 常用方法及需要注意的問(wèn)題
jQuery.validate 常用方法及需要注意的問(wèn)題，需要的朋友可以參考一下2013-03-03
jquery之empty()與remove()區(qū)別說(shuō)明
要用到移除指定元素的時(shí)候，發(fā)現(xiàn)empty()與remove([expr])都可以用來(lái)實(shí)現(xiàn)。可仔細(xì)觀察效果的話就可以發(fā)現(xiàn)。2010-09-09
在高版本的jquery引入prop方法后，什么時(shí)候該用prop？什么時(shí)候用attr？它們兩個(gè)之間有什么區(qū)別？這些問(wèn)題就出現(xiàn)了。下面這篇文章主要給大家介紹了Jquery中attr與prop區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-05-05
jquery自動(dòng)填充勾選框即把勾選框打上true
jquery自動(dòng)填充勾選框，即把勾選框打上（true），然后通過(guò)ajax方式獲得勾選項(xiàng)列表，再把列表內(nèi)的選項(xiàng)打上2014-03-03
將JavaScript的jQuery庫(kù)中表單轉(zhuǎn)化為JSON對(duì)象的方法
這篇文章主要介紹了將JavaScript的jQuery庫(kù)中表單轉(zhuǎn)化為JSON對(duì)象的方法,包括對(duì)序列化時(shí)空格問(wèn)題的處理方法,需要的朋友可以參考下2015-11-11
在本教程中，我將告訴你如何使用一些常見的形式領(lǐng)域jquery.maxlength.js2011-09-09
jQueryeasyui 中如何使用datetimebox 取兩個(gè)日期間相隔的天數(shù)
這篇文章主要介紹了jQueryeasyui 中使用datetimebox 取兩個(gè)日期間相隔的天數(shù)，需要的朋友參考下吧2017-06-06