jQuery實現圖文混排選項卡切換



25 97 33



特效描述:jQuery實現 圖文混排 選項卡切換,jQuery實現圖文混排選項卡切換

代碼結構

1. 引入CSS

<link charset="utf-8" rel="stylesheet" type="text/css" href="css/zzsc.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>

3. HTML代碼

<script>
	var myData = {
	"l":[{
		"p":44691,"n":"幻想四季——瑞士韋爾比耶音樂節室...","ln":"幻想四季——瑞士韋爾比耶音樂節室內樂團訪華巡演·廣州站","v":"星海音樂廳(交響...","l":"星海音樂廳(交響樂演奏廳)","t":"2013.03.02","s":3,"c":"100","m":1,"d":"這是一場時隔近三個世紀的兩個以四季為主題的經典協奏盛宴。有超越時代經典不衰的維瓦爾第的四季,和皮亞佐拉的拉美風格的布宜諾斯艾利斯的四季。"
	}
	,{
		"p":40808,"n":"《中國之聲》2013新年音樂會","ln":"《中國之聲》2013新年音樂會","v":"人民大會堂","l":"人民大會堂","t":"2012.12.30","s":3,"c":"280","m":1,"d":"中國交響樂團一年一度的《中國之聲》新年音樂會即將到來,連續兩年的《中國之聲》使我們不僅聽到了高品質、高水準的音樂作品,更欣賞到了國內頂尖指揮家的藝術風采。"
	}
	,{
		"p":42172,"n":"格里莫演繹勃拉姆斯 上海交響樂團...","ln":"格里莫演繹勃拉姆斯 上海交響樂團2012-2013樂季音樂會","v":"上海音樂廳","l":"上海音樂廳","t":"2013.01.05","s":7,"c":"60","m":1,"d":"勃拉姆斯的兩部鋼琴協奏曲都是規模空前、內容深沉的“交響協奏曲”,鋼琴不是唯一的主角,而始終處在和樂隊的角力之中,因此演奏者極需內力。鋼琴家埃蓮娜?格里莫雖師承法、俄傳統,但她一直更注重德奧經典作品,且演得敏銳而深沉,不時靈光閃現,極具性格。..."
	}
	,{
		"p":42813,"n":"2012-2013新春演出季 祖...","ln":"2012-2013新春演出季 祖賓·梅塔與以色列愛樂樂團新年音樂會","v":"廣州大劇院","l":"廣州大劇院","t":"2012.12.29","s":3,"c":"280","m":0,"d":"他指揮棒下的音樂華美絢爛,明晰而渾厚,緊緊攫獲了全球樂迷的心房。他的指揮風格既有富特文格勒的氣質、托斯卡尼尼的熱情,又有瓦爾特的浪漫、卡拉揚的流暢,更有他自己的豪爽。"
	}
	,{
		"p":42858,"n":"維也納約翰施特勞斯圓舞曲樂團20...","ln":"維也納約翰施特勞斯圓舞曲樂團2013北京新年音樂會","v":"北京音樂廳","l":"北京音樂廳","t":"2013.01.04","s":3,"c":"180","m":0,"d":"由約翰.施特勞斯親自手拿小提琴,用小提琴代替指揮棒,通過他的高超琴藝及樂團成員的精彩表演圓舞曲音樂變成了正統音樂,進入了上流社會,使之成為既活潑歡快亦流暢輕柔的交響詩篇,巴黎人蕩漾在此美妙的音樂旋律中"
	}
	,{
		"p":43071,"n":"中國(廣州)2013新年音樂會—...","ln":"中國(廣州)2013新年音樂會—中國國家交響樂團","v":"廣州大劇院","l":"廣州大劇院","t":"2013.01.02","s":3,"c":"280","m":1,"d":"1956年7月3日,中國的國家樂團-中央樂團成立,在北京舉行了樂團成立后的第一場音樂會,音樂會的內容為紀念莫扎特誕辰200周年,1996年樂團進行了重組,更名為中國交響樂團。"
	}
	]
};
  </script>
<div class="classical-tag">
	<div id="classproject">
		<div class="classical-tag-detail">
			<a href="http://51qianduan.com" title="幻想四季——瑞士韋爾比耶音樂節室內樂團訪華巡演·廣州站" target="_blank" class="img">
			<img width="109" height="144" style="display: inline-block;" src="images/1.jpg" />
			</a>
			<dl>
				<dt>
				<a href="http://51qianduan.com" target="_blank" title="幻想四季——瑞士韋爾比耶音樂節室內樂團訪華巡演·廣州站">
				幻想四季——瑞士韋爾比耶音樂節室...</a></dt>
				<dd>場館:<span title="星海音樂廳(交響樂演奏廳)">星海音樂廳</span></dd>
				<dd>時間:2013.03.02</dd>
				<dd>1人評論</dd>
				<dd class="price">票價:<strong><i class="yen">¥</i>100</strong>起</dd>
			</dl>
			<p><span class="begin"></span>這是一場時隔近三個世紀的兩個以四季為主題的經典協奏盛宴。有超越時代經典不衰的維瓦爾第的四季,和皮亞佐拉的拉美風格的布宜諾斯艾利斯的四季。 
			<span class="end"></span></p>
		</div>
	</div>
	<ul>
		<li class="on"><span></span>
		<a href="http://51qianduan.com" target="_blank" title="幻想四季——瑞士韋爾比耶音樂節室內樂團訪華巡演" projectid="44691">
		幻想四季——瑞士韋爾比耶音樂節室內樂團訪華巡演</a> </li>
		<li><span></span>
		<a href="http://51qianduan.com" target="_blank" title="《中國之聲》2013新年音樂會" projectid="40808">
		《中國之聲》2013新年音樂會</a> </li>
		<li><span></span>
		<a href="http://51qianduan.com" target="_blank" title="格里莫演繹勃拉姆斯 上海交響樂團2012-2013樂季音樂會" projectid="42172">
		格里莫演繹勃拉姆斯 上海交響樂團2012-2013樂季音樂會</a> </li>
		<li><span></span>
		<a href="http://51qianduan.com" target="_blank" title="2012-2013新春演出季 祖賓·梅塔與以色列愛樂樂團新年音樂會" projectid="42813">
		2012-2013新春演出季 祖賓·梅塔與以色列愛樂樂團新年音樂會</a> </li>
		<li><span></span>
		<a href="http://51qianduan.com" target="_blank" title="維也納約翰施特勞斯圓舞曲樂團2013北京新年音樂會" projectid="42858">
		維也納約翰施特勞斯圓舞曲樂團2013北京新年音樂會</a> </li>
		<li><span></span>
		<a href="http://51qianduan.com" target="_blank" title="中國(廣州)2013新年音樂會—中國國家交響樂團" projectid="43071">
		中國(廣州)2013新年音樂會—中國國家交響樂團</a> </li>
	</ul>
</div>
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 圖片疊加 圖片層疊 圖片放大鏡 頭像上傳 圖片上傳 圖片翻轉 圖片旋轉 圖片延遲加載 圖片延遲 圖片加載 圖片淡出淡進 圖片淡出 圖片淡進 二維碼 圖片全屏 圖片拖動 圖片拖拽 帶縮略圖的幻燈片 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 滑動選項卡 滑動切換 圖片廣告 地圖 中國地圖 世界地圖 滾動切換 滾動條切換 圖片滾動 圖片滾動條 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖片切換 圖片選項卡 圖標選項卡 圖片滑動 圖片滑塊 圖片收縮展開 圖片收縮 圖片展開 純圖片輪播 圖片輪播 圖標導航 圖標菜單 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 背景切換 大圖切換 滑動手風琴 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 滑動星星打分 圖表 圖片 圖片插件 頭像截圖 其他 圖文布局 導航切換 菜單切換 選項卡自動切換 圖片文字 圖片切換 切換圖片 鼠標滑過 鼠標懸停 跟隨鼠標移動
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子