頁面文件如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多標籤摺頁</title>
<link href="css/style.css" type=text/css rel=stylesheet / >
<link href="css/foot.css" type=text/css rel=stylesheet / >
<link href="css/top.css" type=text/css rel=stylesheet / >
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jQuery.moretagPack.js"></script>
</head>
<body>
<DIV id="divContainer" align="center" style="margin:20px;">
<!-- 摺頁標籤 -->
<DIV class=C26>
<A title="PLM" class="a_C01" href="javascript:;">PLM</A>
<A title="ERP" class="a_C2" href="javascript:;">ERP</A>
<A title="IT" class="a_C2" href="javascript:;">IT</A>
<A title="工控" class="a_C2" href="javascript:;">工控</A>
</DIV>
<!-- 上部內容1 -->
<div class="Ctop" title="PLM">
<h2><a hred="#">渠道共贏——ERP市場的成功之路</a></h2>
<ul>
<li><a href="#" rel="external">[高新信息]</a></li>
<li><a href="#" rel="external">[產業信息]</a></li>
<li><a href="#" rel="external">[發展信息]</a></li>
<li><a href="#" rel="external">[信息計劃]</a></li>
</ul>
</div>
<!-- 文字列表1 -->
<div class="pC" title="PLM">
<dl>
<dt><span><a href="#" rel="external">浙江年畫生產商稱華南虎照片源自其產品(圖)</a></span>10-25</dt>
<dt><span><a href="#" rel="external">三地發現年畫"周老虎" 挺虎派官員暗示照片有假</a></span>10-25</dt>
<dt><span><a href="#" rel="external">百餘記者爭撲老虎新聞 當地披露一串虎消息(圖)</a></span>10-25</dt>
<dt><span><a href="#" rel="external">周正龍迴應華南虎年畫：年畫是照着照片畫的(圖)</a></span>10-25</dt>
<dt><span><a href="#" rel="external">在東莞找到第三幅與陝西“華南虎”相似的年畫</a></span>10-25</dt>
<dt><span><a href="#" rel="external">二維CAD復後的思考後的思考..</a></span>10-25</dt>
<dt><span><a href="#" rel="external">郝勁鬆將作客網易聊天室，回答我們和您.</a></span>10-25</dt>
</dl>
</div>
<!-- 上部內容2 -->
<div class="Ctop" style="display:none;" title="ERP">
<h2><a hred="#">ERP市場—渠道共贏—的成功之路</a></h2>
<ul>
<li><a href="#" rel="external">[安全信息]</a></li>
<li><a href="#" rel="external">[信息產業]</a></li>
<li><a href="#" rel="external">[信息發展]</a></li>
<li><a href="#" rel="external">[信息]</a></li>
</ul>
</div>
<!-- 文字列表2 -->
<div class="pC" style="display:none;" title="ERP">
<dl>
<dt><span><a href="#" rel="external">維CAD復興D復興D二維CAD復興</a></span>10-25</dt>
<dt><span><a href="#" rel="external">二維CAD復興背後的思考後的思考...</a></span>10-25</dt>
<dt><span><a href="#" rel="external">二維CAD復背後的思考後的思考</a></span>10-25</dt>
<dt><span><a href="#" rel="external">二維CAD復興後的思考...</a></span>10-25</dt>
<dt><span><a href="#" rel="external">二維CA復興背後的思考後的思考</a></span>10-25</dt>
<dt><span><a href="#" rel="external">二維CAD復後的思考後的思考..</a></span>10-25</dt>
<dt><span><a href="#" rel="external">二維CD復興背後後的思考...</a></span>10-25</dt></dl>
</div>
<!-- 上部內容3 -->
<div class="Ctop" style="display:none;" title="IT">
<h2><a hred="#">成功之路—渠道共贏—ERP市場的</a></h2>
<ul>
<li><a href="#" rel="external">[信息]</a></li>
<li><a href="#" rel="external">[信息產業]</a></li>
<li><a href="#" rel="external">[信息發展]</a></li>
<li><a href="#" rel="external">[信息]</a></li>
</ul>
</div>
<!-- 文字列表3 -->
<div class="pC" style="display:none;" title="IT">
<dl>
<dt><span><a href="#" rel="external">河南郟縣違規徵地 村民實名舉報信被公開</a></span>10-25</dt>
<dt><span><a href="#" rel="external">二維CAD復興背後的思考後的思考...</a></span>10-25</dt>
<dt><span><a href="#" rel="external">鑫諾二號因故障無法工作 年底前最後搶救 </a></span>10-25</dt>
<dt><span><a href="#" rel="external">二維CAD復興後的思考...</a></span>10-25</dt>
<dt><span><a href="#" rel="external">孟加拉國強風暴導致過萬人喪生(</a></span>10-25</dt>
<dt><span><a href="#" rel="external">開創基層黨的建設新局面</a></span>10-25</dt>
<dt><span><a href="#" rel="external">二維CD復興背後後的思考...</a></span>10-25</dt>
</dl>
</div>
<!-- 上部內容4 -->
<div class="Ctop" style="display:none;" title="工控">
<h2><a hred="#">渠道共贏—ERP市場—的成功之路</a></h2>
<ul>
<li><a href="#" rel="external">[觀點信息]</a></li>
<li><a href="#" rel="external">[信息產業]</a></li>
<li><a href="#" rel="external">[信息發展]</a></li>
<li><a href="#" rel="external">[信息]</a></li>
</ul>
</div>
<!-- 文字列表4 -->
<div class="pC" style="display:none;" title="工控">
<dl>
<dt><span><a href="#" rel="external">三部委醞釀徵收排放稅 有車族爲尾氣買單</a></span>10-25</dt>
<dt><span><a href="#" rel="external">李光耀:北京不會因奧運而對"臺獨"手軟(圖)</a></span>10-25</dt>
<dt><span><a href="#" rel="external">二維CAD復背後的思考後的思考</a></span>10-25</dt>
<dt><span><a href="#" rel="external">12歲女孩替母掃街被譽爲成都最美環衛工(</a></span>10-25</dt>
<dt><span><a href="#" rel="external">二維CA復興背後的思考後的思考</a></span>10-25</dt>
<dt><span><a href="#" rel="external">杭州男子設計出大型"無性別公廁</a></span>10-25</dt>
<dt><span><a href="#" rel="external">二維CD復興背後後的思考...</a></span>10-25</dt>
</dl>
</div>
</div>
<div align="center" style="text-align:left;padding:10px 0px 0px 4px;margin-top:20px;margin-left:auto;margin-right:auto;border:1px dashed #cccccc;width:450px; height:215px;">
<b>目標</b> --
多個標籤頁的摺疊顯示 ( 用jquery框架實現這一目標 )
<br/><br/>
<b>方案</b> --
點擊某個標籤頁後，樣式爲選擇狀態，其他的非選擇狀態，下方的內容根據選擇的標籤頁不同，變幻出只屬於某個標籤頁下的內容。 <br/> <br/>
<b>實施</b> --
爲了符合web2.0的標準，將表現層，代碼層，和顯示層徹底分離開來。有關實現"多個標籤頁的摺疊顯示"的代碼位於 js文件夾下的jQueryManipulate.js文件中。
主要用到了<span style="color:red;">attr(),each(fn) ,css() ,show() ,hide()</span>這幾個主要的函數。有關這幾個函數的定義，和使用方法，大家可以看看它的API。
我們先來看看這個DOM樹的構造圖。
<br/>
<img src="images/dom.jpg" alt="圖片無法顯示"/>
</div>
</body>
</html>
js文件：
// 控制前臺頁面中標籤爲input類別爲text和password以及標籤爲textarea的頁面顯示
$(document).ready(function(){
if ($.browser.msie)
{
$("input[@type='text'],input[@type='password'],textarea").focus(function(){
$(this).addClass("ie_focus");
}
)
.blur(function(){
$(this).removeClass("ie_focus");
}
)
}
}
)
// 控制頁面中區塊的隱藏 | 顯示
$(function(){
$("div #rollA").click(function(){
var displayVal = $("#whitepaperDiv").css("display") ;
if (displayVal == 'none') // 顯示
{
$('div #whitePaperImg').attr({src: "images/icon_portlet_minimize.gif", title: "Minimize"});
$('#whitepaperDiv').show("slow") ;
}
else // 隱藏
{
$('div #whitePaperImg').attr({ src: "images/icon_portlet_maximize.gif", title: "Maximize" });
$('#whitepaperDiv').hide("slow") ;
}
}
)
}
)
// edit in place and now show
$(function(){
setClickable();
});
function setClickable() {
$('#editInPlace').click(function() {
var textarea = '<div><textarea rows="10" cols="60" style="width:750px;">'+$(this).html()+'</textarea>';
var button = '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>';
var revert = $(this).html();
$(this).after(textarea+button).remove();
$('.saveButton').click(function(){saveChanges(this, false);});
$('.cancelButton').click(function(){saveChanges(this, revert);});
})
.mouseover(function() {
$(this).addClass("editable");
})
.mouseout(function() {
$(this).removeClass("editable");
});
};
function saveChanges(obj, cancel) {
if(!cancel) {
var t = $(obj).parent().siblings(0).val();
}
else {
var t = cancel;
}
if(t=='') t='(click to add text)';
$(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove();
setClickable();
}
// 控制頁面中"新聞速遞","廠商動態"的隱藏 | 顯示
$(document).ready(function(){
$("#divnews .h26 A").click(function(){
// 確保點擊的爲指定樣式
if ($(this).attr('class') != 'a_01')
{
// 確保點擊的爲指定樣式
$('#divnews .h26 A').each(function(i){
if ($(this).attr("class") != 'a_01')
{
$(this).attr("class","a_01");
}
else
{
$(this).attr("class","a_2");
}
});
// switchShowHide();
$('#divnews .pL').each(function(i){
var displayVal = $(this).css("display") ;
if (displayVal == 'none') // 顯示
{
$(this).show() ;
}
else // 隱藏
{
$(this).hide() ;
}
});
}
})
})
// 多頁摺疊的隱藏 | 顯示
$(document).ready(function(){
$("#divContainer .C26 a").click(function(){
// 確保點擊的爲指定樣式
if ($(this).attr('class') != 'a_C01')
{
// 摺疊標籤頁的樣式指定
$('#divContainer .C26 A').each(function(i){
$(this).attr("class","a_C2");
});
$(this).attr("class","a_C01");
// 獲取選擇的標籤
var selectTitle = $(this).attr("title");
// 對應標籤下上部內容區塊的顯示 | 隱藏
$('#divContainer .Ctop').each(function(i){
var displayVal = $(this).css("display") ;
var title = $(this).attr("title");
if (displayVal == 'none' && title == selectTitle) // 顯示
{
$(this).show() ;
}
else // 隱藏
{
$(this).hide() ;
}
});
// 文字列表區塊的顯示 | 隱藏
$('#divContainer .pC').each(function(i){
var displayVal = $(this).css("display") ;
var title = $(this).attr("title");
if (displayVal == 'none' && title == selectTitle) // 顯示
{
$(this).show() ;
}
else // 隱藏
{
$(this).hide() ;
}
});
}
})
})
// 全選|取消全選功能
$(function() {
$("#selectall").click(function() {
$("input[@name='shareuser[]']").each(function() {
$(this).attr("checked", true);
});
});
$("#deselectall").click(function() {
$("input[@name='shareuser[]']").each(function() {
$(this).attr("checked", false);
});
});
});
// 圖片文字的無縫循環滾動功能
$(function() {
var speed = 60 ;
$('#demo2').html($('#demo1').html());
var MyMar2=window.setInterval(Marquee2,speed);
$('#demo').mouseover(function(){
window.clearInterval(MyMar2);
});
$('#demo').mouseout(function(){
MyMar2=window.setInterval(Marquee2,speed);
});
});
function Marquee2()
{
var demoscrolltop = $('#demo')[0].scrollTop ;
var demo1offsetheight = $('#demo1')[0].offsetHeight ;
var demo2offsettop = $('#demo2').get(0).offsetTop ;
//alert('demoscrolltop:'+demoscrolltop+',demo1offsetheight:'+demo1offsetheight+',demo2offsettop:'+demo2offsettop);
if (demo2offsettop - demoscrolltop <= 0)
{
demoscrolltop = demoscrolltop - demo1offsetheight;
}
else
{
$('#demo')[0].scrollTop++;
}
}