特效描述: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>