首頁 > 開發者 > JavaScript
最近*海*原有系統需要進行改進，可能會將Flex改為Flex與jsp相結合的方式，好發揮兩者的優勢。這兩天在做html頁面，頁面內容主要展現在標籤頁中，其基礎如下所示：
為增強使用者對標籤頁的體驗效果，增加滑鼠滑過時標籤背景色更滑，選中某個標籤後該標籤應與標籤內容形成一體等功能效果。標籤頁的標籤可以使用列表來實現，標籤頁內容部分使用DIV來劃分，此處僅顯示DIV左右下三邊框，上邊框使用ul的下邊框展示，便於選中某個標籤時，通過控制標籤下邊框的隱藏，將標籤與標籤內容形成一個整體。代碼實現如下所示：
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style>ul{ border-bottom:1px solid #3366aa;padding:0 0 27px 0;margin:0;width:600px;margin-bottom:0;}li{float:left; display:inline;list-style:none; margin:0 5px 0 0;line-height:26px;padding:0 16px;text-align:center;border:1px solid #cccccc;background-color:#CFE0F2; border-bottom:0;} .selected{ border:1px solid #3366aa;color:#34B4BD; border-bottom:1px solid #ffffff;background-color:#ffffff; }#acceptContent ,#processContent ,#associateWorkOrder ,#processCourse{display:none;border:1px solid #3366aa;border-top:1px solid #ffffff;width:600px;height:300px;font-weight::bold;margin-top:0;}#requireContent{display:block;border:1px solid #3366aa;border-top:1px solid #ffffff;width:600px;height:300px;font-weight::bold;margin-top:0;}</style></head><script>var obj;//記錄選中標籤，對其進行樣式設定//滑鼠滑過時function mouseOver(){event.srcElement.style.color = '#ffffff';event.srcElement.style.backgroundColor = '#006699';}//滑鼠滑出時function mouseOut(){event.srcElement.style.color = "";event.srcElement.style.backgroundColor = "";}//按一下滑鼠選中標籤時function onClick(showDiv){//點擊時標籤樣式event.srcElement.style.color = "#34B4BD";event.srcElement.style.backgroundColor = "#ffffff";//設定選中標籤的樣式if(obj != null){obj.className="";}obj = event.srcElement;obj.className = "selected";//僅顯示選中標籤所對應內容requireContent.style.display = "none";acceptContent.style.display = "none";processContent.style.display = "none";associateWorkOrder.style.display = "none";processCourse.style.display = "none";showDiv.style.display = "block";}</script><body > <div> <div> </div> <div> <ul id="ospsrc" class="neocard"> <b><li onmouseover="mouseOver()" onmouseout="mouseOut()" onclick="onClick(requireContent)">標籤1</li> </b> <b><li onmouseover="mouseOver()" onmouseout="mouseOut()" onclick="onClick(acceptContent)">標籤2</li> </b><b><li onmouseover="mouseOver()" onmouseout="mouseOut()" onclick="onClick(processContent)">標籤3</li> </b> <b><li onmouseover="mouseOver()" onmouseout="mouseOut()" onclick="onClick(associateWorkOrder)">標籤4</li> </b> <b><li onmouseover="mouseOver()" onmouseout="mouseOut()" onclick="onClick(processCourse)">標籤5</li> </b> </ul> <div> <div id="requireContent" > <!--標籤1模組--> <label>標籤1</label> </div> <div id="acceptContent"> <!--標籤2模組--> <label>標籤2</label> </div><div id="processContent"> <!--標籤3模組--> <label>標籤3</label> </div> <div id="associateWorkOrder"> <!--標籤4模組--> <label>標籤4</label> </div> <div id="processCourse"> <!--標籤5模組--> <label>標籤5</label> </div> </div> </div> </div></body></html>
上述代碼中標籤內容使用了DIV，這樣每個標籤都會有一個DIV，只需要將標籤內容填入對應DIV中即可。這樣所有內容都寫在了一個HTML頁面中。我們還可以將每個標籤頁內容分別放到不同的HTML頁面中，使用iFrame展示選中標籤的內容：<iframe id="osptgt" width="100%" frameborder="0" src="content.html"></iframe>。之前使用JS控制某個DIV的顯現與否，現在使用JS控制嵌入iFrame中的頁面。
JavaScript是一種基於對象的語言，之所以不是物件導向的語言，最主要是因為它沒有提供象抽象、繼承、重載等有關物件導向語言的許多功能。但它卻將一切內容都視為對象來處理。下面所展現的標籤頁的另一種實現更能體現這一點：將所有javaScript方法和屬性封裝在一個叫做NeoCard類中，將HTML標籤視作對象，在初始化時對li標籤進行註冊滑鼠事件。
<html><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"/><title>頁簽</title><style type="text/css">ul.neocard{ border-bottom:1px solid #3366aa;padding:0 0 27px 0;margin:0;}ul.neocard li{float:left; display:inline;list-style:none; margin:0 0 0 5px;line-height:26px;padding:0 16px;cursor:hand; text-align:center;border:1px solid #cccccc;background-color:#f4f4f4; border-bottom:0;} ul.neocard li.selected{ border:1px solid #3366aa;color:#e28822; border-bottom:1px solid #ffffff;background-color:#ffffff; cursor:text;}</style><script type="text/javascript"> NeoCard={ init:function (osp,tgt,sci){ NeoCard.cs='selected'; var os=document.getElementById(osp).getElementsByTagName('li'); for(var i=0,il=os.length;i<il;i++){ os[i].attachEvent('onmouseover',NeoCard.omi); os[i].attachEvent('onmouseout',NeoCard.omo); os[i].attachEvent('onclick',NeoCard.ock); } NeoCard.fm=document.getElementById(tgt); var m=20;//怎麼獲得這個值 探索中...NeoCard.fm.height=document.body.clientHeight-NeoCard.ops(NeoCard.fm).y-m; NeoCard.oc=os[sci]; NeoCard.fm.src=NeoCard.oc.src; NeoCard.oc.className=NeoCard.cs; }, ops:function(o){ var ps={x:o.offsetLeft||0,y:o.offsetTop||0}; o=o.offsetParent; if(o){ var _ps=arguments.callee(o); ps.x+=_ps.x; ps.y+=_ps.y; } return ps; }, //onmouseoveromi:function (){ var _om=event.srcElement; if(_om==NeoCard.oc)return; NeoCard.om=_om; var s=NeoCard.om.style; s.color='#ffffff'; s.backgroundColor='#006699'; }, //onmouseoutomo:function (){ var s=NeoCard.om.style; s.color=''; s.backgroundColor=''; }, //onclickock:function (){ var _oc=event.srcElement; if(NeoCard.oc==_oc)return; NeoCard.oc.className=''; NeoCard.oc=_oc; NeoCard.fm.src=NeoCard.oc.src; NeoCard.oc.className=NeoCard.cs; NeoCard.omo(); } }</script> </head><body><ul id="ospsrc" class="neocard"> <li src="about:blank">頁簽</li> <li src="about:blank">頁簽</li> <li src="about:blank">頁簽</li> <li src="about:blank">頁簽</li> <li src="about:blank">頁簽</li> </ul><iframe id="osptgt" width="100%" frameborder="0" src=""></iframe> </body><script type="text/javascript"> NeoCard.init('ospsrc','osptgt',2); </script> </html>
兩種實現方式沒有本質上的區別，標籤頁內容是否彙總在同一個頁面中是兩者的主要區別。哪種設計方式更適合不能僅僅依靠設計原則，也要參考實際，介面只是初步，後續還要在頁面上做開發。前者的設計在介面實現上更為簡便些，後續的開發中在同一個頁面使用Ajax等也可能帶來較為簡便的操作，不過介面的內容顯得有些龐大。還需在實踐中考驗前者的想法。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
