星期一, 12月 22, 2008

(jquery)頁籤區塊

今天看了一下yahoo的首頁..裡面有一個塊新聞的"頁籤區塊"..感覺蠻美麗的..實做一下..玩玩..

這是yahoo的美麗區塊..

2

準備一下.css跟.aspx畫面大概如下面這樣..不過這些區塊都還沒有display:none

1

.aspx的原始碼

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/css1.css" rel="stylesheet" type="text/css" />
<script src="script/jquery-1.2.6-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function() {
$('#tabs1 ul li').hover(
function() {
var id = $(this).attr('id');
$(this).addClass('current');
$(':not([id=' + id + '])').removeClass('current');
var displayDivId = 'div' + id.substr(2, 1);
$('#' + displayDivId).css('display', 'block');
$('#main div:not([@id=' + displayDivId + '])').css('display', 'none');
},
function() { }
);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="tabs1">
<ul>
<!-- CSS Tabs -->
<li id="li1" class="current"><a href="#"><span>Home</span></a></li>
<li id="li2"><a href="#"><span>Products</span></a></li>
<li id="li3"><a href="#"><span>Services</span></a></li>
<li id="li4"><a href="#"><span>Support</span></a></li>
</ul>
</div>
<div id="main">
<div id="div1" class="board">
新聞圖片團圓搭專機 一路吃到台灣 比照總統專機的長榮大貓熊「團團、...
美救汽車業 援174億美元 美國總統布希 的政府十九日宣布總金...</div>
<div id="div2" class="board" style="display: none;">
郭泓志獲選「最佳設局投手」由球迷參與投票的TYIB(This Year In Baseball)
...7隊報名 SBL如期開打SBL超級 籃賽第六年球季進入倒數計時階段,前5季老班底
的7支球隊,昨天...
</div>
<div id="div3" class="board" style="display: none;">
港媒驚爆 張茆握有倪震偷腥情愛照...記者溫智平/綜合報導倪震和周慧敏分手變牽
手,歡歡喜喜到婚姻註冊署申請註... 周董偷偷傳情 惜惜侯佩岑侯佩岑生父侯世宏
過世後,侯佩岑只要沒工作就會到台南守靈,兩地往返加上心...
</div>
<div id="div4" class="board" style="display: none;">
伊拉克戰爭數年 平民死亡6...美國和伊拉克政府都宣稱,伊拉克的暴力活動已緩和不
少...水門事件秘密告密人深喉嚨辭... (法新社華盛頓19日電)「華盛頓郵報」今天報導,導...
</div>
</div>
</form>
</body>
</html>

結果

fss1

試玩一下..有啥心得可以交流一下..^^..

參考:
http://jquery.com/

沒有留言: