Jquery的Tabs內(nèi)容輪換效果實(shí)現(xiàn)代碼,幾行搞定
更新時(shí)間：2014年02月12日 10:05:49 作者：
本篇文章主要是對(duì)Jquery的Tabs內(nèi)容輪換效果的實(shí)現(xiàn)代碼進(jìn)行了介紹。幾行代碼輕松搞定
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery的Tabs內(nèi)容輪換效果實(shí)現(xiàn)代碼,幾行搞定</title>
<script language="javascript" type="text/javascript" src="/Scripts/jquery-1.4.4.min.js"></script>
<style type="text/css">
* { margin:0; padding:0;}
body { font:12px Verdana, Geneva, sans-serif; color:#404040;}
.tabs { margin:10px 0 0 20px; width:360px; position:relative; overflow:hidden; height:1%; height:160px;}
.tabs span { z-index:2; font-size:12px; border:1px solid #d5d5d5; width:95px; height:25px; line-height:25px; text-align:center; float:left; margin-right:5px; cursor:pointer;}
span.active { background-position:0 -25px; background-color:#d5d5d5;}
#tab-01, #tab-02, #tab-03 { position:absolute; top:26px; left:0; width:338px; padding:10px; height:93px; border:1px solid #d5d5d5; z-index:1;}
#tab-02, #tab-03 { display:none;}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.tabs span').mouseover(function () {
//div隱藏
$('.tabs div').hide();
//查找.tabs span同輩元素span 后面緊鄰的同輩元素div顯示
$(this).siblings('span').removeClass('active').end().addClass('active').next('div').show();
});
});
</script>
</head>
<body>
<div class="tabs">
<!-- 默認(rèn)第一個(gè)tab為激活狀態(tài) -->
<span class="active">熱點(diǎn)新聞</span>
<div id="tab-01">news</div>
<span>娛樂(lè)新聞</span>
<div id="tab-02">enteriment</div>
<span>就業(yè)形勢(shì)</span>
<div id="tab-03">jobs</div>
</div>
</body>
</html>
相關(guān)文章
要實(shí)現(xiàn)這樣的一個(gè)功能復(fù)選框勾選時(shí)給input表單賦值，復(fù)選框取消時(shí)將表單值清除，需要的朋友可以參考下2014-05-05
JQuery團(tuán)隊(duì)打造的javascript單元測(cè)試工具QUnit介紹
元測(cè)試又稱為模塊測(cè)試，是針對(duì)程序模塊(軟件設(shè)計(jì)的最小單位)來(lái)進(jìn)行正確性檢驗(yàn)的測(cè)試工作。單元測(cè)試主要是用來(lái)檢驗(yàn)程式的內(nèi)部邏輯，也稱為個(gè)體測(cè)試、結(jié)構(gòu)測(cè)試或邏輯驅(qū)動(dòng)測(cè)試。通常由撰寫程式碼的程式設(shè)計(jì)師負(fù)責(zé)進(jìn)行。2010-02-02
jquery實(shí)現(xiàn)表單獲取短信驗(yàn)證碼代碼
本文主要分享了jquery實(shí)現(xiàn)表單獲取短信驗(yàn)證碼的代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
基于Jquery的文字滾動(dòng)跑馬燈插件(一個(gè)頁(yè)面多個(gè)滾動(dòng)區(qū))
文字逐行或多行滾動(dòng)跑馬燈插件，基于Jquery。命名為Jquery.RollTitle。支持在一個(gè)頁(yè)面聲明多個(gè)滾動(dòng)區(qū) (就為了要這點(diǎn)才寫了這個(gè))2010-07-07
解決jquery實(shí)現(xiàn)的radio重新選中的問(wèn)題
這篇文章主要介紹了解決jquery實(shí)現(xiàn)的radio重新選中的問(wèn)題的方法和示例，十分的實(shí)用，有需要的小伙伴可以參考下。2015-07-07
基于JQuery的簡(jiǎn)單實(shí)現(xiàn)折疊菜單代碼
利用JQUERY簡(jiǎn)單的實(shí)現(xiàn)功能菜單的折疊效果。本人初學(xué)，寫后臺(tái)稍多一點(diǎn)，很少寫前臺(tái)的效果。還請(qǐng)大蝦們多多指教。2010-09-09
本篇文章介紹了，基于jQuery選擇器的整理集合。需要的朋友參考下2013-04-04
jQuery實(shí)現(xiàn)切換頁(yè)面布局使用介紹
在很多網(wǎng)站尤其在一些購(gòu)物網(wǎng)站上，展示商品的列表頁(yè)提供了許多商品，用戶可以選擇商品的展示方式如列表方式展示和櫥窗方式展示等。在本例中，將給您講述如何實(shí)現(xiàn)這種效果2011-10-10
Jquery Ajax 學(xué)習(xí)實(shí)例2 向頁(yè)面發(fā)出請(qǐng)求 返回JSon格式數(shù)據(jù)
處理業(yè)務(wù)數(shù)據(jù)，產(chǎn)生JSon數(shù)據(jù)，供JqueryRequest.aspx調(diào)用2010-03-03
基于Jquery的動(dòng)態(tài)創(chuàng)建DOM元素的代碼
jquery動(dòng)態(tài)創(chuàng)建頁(yè)面元素，mark一下，以備以后查詢時(shí)使用。以創(chuàng)建div和input為例。2010-12-12