如何基于jquery實(shí)現(xiàn)最簡(jiǎn)單的選項(xiàng)卡切換效果

html

為德保等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及德保網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站建設(shè)、德保網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

head

titletab/title

style

.tab-title?p{color:#666;font-size:15px;font-weight:400;?}

.tab-title?.selected{color:#356aa0;border-bottom:0px;}?/*標(biāo)題被選中時(shí)的樣式*/

.tab-title?span{padding:5px?9px?5px?10px;border:1px?solid?#ccc;border-right:0px;margin-left:-1px;cursor:pointer;}

.tab-content?.hide{display:none;}?/*默認(rèn)讓第一塊內(nèi)容顯示，其余隱藏*/

.tab-content?ul{padding:5px?10px;overflow:hidden;}

.tab-content?ul?li{padding-top:5px;}?

/style

script?type="text/javascript"?src="js/jquery-3.1.1.min.js"/script

script?type="text/javascript"

$(document).ready(function(){

$('.tab-title?span').click(function(){

$(this).addClass("selected").siblings().removeClass();//removeClass就是刪除當(dāng)前其他類；只有當(dāng)前對(duì)象有addClass("selected")；siblings()意思就是當(dāng)前對(duì)象的同級(jí)元素，removeClass就是刪除；

var?n=$(this).index();

$(".tab-content??ul").hide();

$(".tab-content??ul").eq(n).show();

//$(".tab-content??ul").hide().eq($('.tab-title?span').index(this)).show();

});

});

/script?

/head

body

div?class="tab-title"

pspan?class="selected"最新評(píng)論/spanspan近期熱評(píng)/spanspan隨機(jī)文章/spanspan新聞資訊/span/p

/div

div?class="tab-content"

ulli最新評(píng)論/li/ul

ul?class="hide"li近期熱評(píng)/li/ul

ul?class="hide"li隨機(jī)文章/li/ul

ul?class="hide"li新聞資訊/li/ul

/div

body

/html

請(qǐng)問一個(gè)jQuery選項(xiàng)卡怎么寫?。?/h2>

首先如題，你的class必須是一 一對(duì)應(yīng)的，就是說按鈕是的class是tab1，那么與之對(duì)應(yīng)的div里面也必須是tab1，如果不符合這點(diǎn)，以下jq代碼不會(huì)生效，第二點(diǎn)，我給你的ul加了個(gè)id，方便選取元素。

html:

jq:

jquery菜單點(diǎn)擊添加選項(xiàng)卡

定義一個(gè)div設(shè)置display:none，點(diǎn)擊菜單時(shí)，toggle()；再把選項(xiàng)卡中第一個(gè)選項(xiàng)卡的樣式變成被選中時(shí)候的樣式就OK了~

關(guān)于jquery選項(xiàng)卡

樓主看看行不行

div class="hdo zhedie_div"

script type="text/javascript" src="js/jquery-1.3.2.js"/script

script type="text/javascript" src="js/jquery.easing.1.3_.js"/script

script type="text/javascript" src="js/jquery.hrzAccordion.js"/script

script type="text/javascript" src="js/jquery.hrzAccordion.examples.js"/script

div class="hdo tit_02"h2DIV橫向水平左右折疊選項(xiàng)卡/h2a href="/Case.html" title="more"/a/div

ul class="test3"

lidiv class="handle3"img src='images/img01.jpg'/div

h3a href="/about/rongyu"測(cè)試榮譽(yù)/a/h3

p測(cè)試榮譽(yù)....../p

/li

lidiv class="handle3"img src='images/img02.jpg'/div

h3a href="/xiaofang"消防工程案例展示二/a/h3

p消防工程案例展示消防工程案例展示消防工程案例展示消防工程案例展示消防工......../p

/li

lidiv class="handle3"img src='images/img03.jpg'/div

h3a href="/shizheng"市政工程案例展示二/a/h3

p市政工程案例展示二....../p

/li

/uldiv style="clear:both;"/div

/div

jquery的ui插件中的選項(xiàng)卡功能有什么好處？防止頁(yè)面刷新，加快速度？

在頁(yè)面不刷新的情況下，可以看其他tab選項(xiàng)卡的內(nèi)容，缺點(diǎn)就是初始加載的時(shí)候需要的資源較多，開始稍慢一點(diǎn)

基于jquery實(shí)現(xiàn)最簡(jiǎn)單的選項(xiàng)卡切換效果

這個(gè)功能在現(xiàn)在的網(wǎng)站中使用較為普遍，就是以選項(xiàng)卡的形式來(lái)對(duì)一些內(nèi)容做了分類。，比如下面的天貓商城。

下面的源碼是仿照天貓寫的一個(gè)選項(xiàng)卡，實(shí)現(xiàn)起來(lái)的效果如下。

主要是利用我們?cè)邳c(diǎn)擊相應(yīng)板塊是觸發(fā)它的單擊事件，在單擊事件中再對(duì)內(nèi)容顯示框(tabbox)進(jìn)行相應(yīng)項(xiàng)的顯示和隱藏操作。

同時(shí)利用hover為其添加了鼠標(biāo)滑過時(shí)的效果。

代碼：

!DOCTYPE

html

html

lang="en"

xmlns=""

head

meta

charset="utf-8"

/

link

href="css/style1.css"

rel="stylesheet"

type="text/css"

/

script

src="jquery-1.3.2.min.js"/script

title/title

script

$(function

()

{

var

$div_li

=

$("div.tab_menu

ul

li");

$div_li.click(function

()

{

//定義了tan_menu對(duì)應(yīng)的單擊事件，也就是類別的單擊事件。

$(this).addClass("selected")

.siblings().removeClass("selected");

var

index

=

$div_li.index(this);

$("div.tab_boxdiv").eq(index).show()

.siblings().hide();

}).hover(function

()

{

//定義了鼠標(biāo)滑過特效

$(this).addClass("hover");

},

function

()

{

$(this).removeClass("hover");

});

});

/script

/head

body

div

class="tab"

div

class="tab_menu"

ul

li

class="selected"時(shí)事/li

li體育/li

li娛樂/li

/ul

/div

div

class="tab_box"

div時(shí)事/div

div

class="hide"體育/div

div

class="hide"娛樂/div

/div

/div

/body

/html

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家熟練掌握實(shí)現(xiàn)選項(xiàng)卡切換的技巧有所幫助。

本文標(biāo)題：選項(xiàng)卡jquery,首字下沉在哪個(gè)選項(xiàng)卡
標(biāo)題網(wǎng)址：http://aaarwkj.com/article30/dsisjso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站排名、靜態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、電子商務(wù)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)