DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery多選項卡效果實例代碼之一
jquery多選項卡效果實例代碼之一
編輯：JQuery特效代碼     

. 代碼如下:
<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>

頁面效果：

頁面比較雜亂，你可以看到很多選項卡，而且有多個選項卡，點擊每個選項，內容發生變化，而且顏色也改變。

JQuery特效代碼
easyui tree json
public static List<treeNode> formatTree(List
jquery教程限制文本框只能輸入數字和小數點示例分享
. 代碼如下:$(function(){      
jQuery jqgrid 對含特殊字符json 數據的 Java 處理方法
看到很多網上對含特殊字符 json 數據處理，都是逐個判斷是哪個特殊字符，比如回車如何處理，引號如何

相關文章

jQuery基礎知識JQuery入門技巧JQuery特效代碼JQuery常見問題
小編推薦
jquery實現當滑動到一定位置時固定效果 22點關於jquery性能優化的建議 JQuery的ajax獲取數據後的處理總結(html,xml,json) treepanel動態加載數據實現代碼 jQuery 如何先創建、再修改、後添加DOM元素 jQuery的$符號說明 jquery使用append(content)方法注意事項分享 Jquery自定義button按鈕的幾種方法 jquery實現將獲取的顏色值轉換為十六進制形式的方法教程 Jquery解析json數據詳解
熱門推薦
jquery 上下滾動廣告 jQuery支持動態參數將函數綁定到事件上的方法教程 jquery.form.js用法之清空form的方法 Jquery封裝tab自動切換效果的具體實現 jQuery制作簡單柱狀圖實例教程 基於json的jquery地區聯動效果代碼 基於jQuery的仿flash的廣告輪播 jquery獲取自定義屬性(attr和prop)實例介紹 jquery text()要注意啦
大家都在看
fieldset實現表中表效果 JS判斷是否長按某一鍵的方法 Javascript小游戲貪吃蛇(詳細注釋) ajax session過期問題的幾個解決方案 AngularJS基礎 ng-non-bindable 指令詳細介紹 DIV+CSS技術入門 CSS讓表格的溢出內容隱藏起來 html中iframe控制父頁面刷新實現思路及代碼
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved