javascript+css 標籤顯示方式的思考

星期天看了很多國外的圖書出版商的網站！發現Sams的標籤顯示方式的實踐思路不錯！標籤顯示的實踐方式一般都要用到:javascript,來動態改變div的顯示和隱藏.來看看人家寫的JS代碼吧:

1. <script type="text/javascript">
2. //<![CDATA[
3.          //標籤的數組,如果讓我寫,我想不到會用這個儲存
4.     var tabArray = new Array();
5.          //預設顯示哪個標籤
6.     function showDefaultTab(){
7.         //show 'Description' tab by default, else show first
8.         if(!showTab('item1')){
9.             displayToggle(tabArray[0]+"_container",true,'container on');
10.             document.getElementById(tabArray[0]).className = 'selected';
11.         }
12.     }
13.          //改變內容盒的隱顯,並重繪顯示樣式:感覺有點像配適器模式
14.     function showTab(tabID){
15.         var found = false;
16.         for(var i=0; i < tabArray.length; i++){
17.             if(tabArray[i] != tabID){
18.                 displayToggle(tabArray[i]+"_container",false, 'container');
19.                 document.getElementById(tabArray[i]).className = '';
20.             }else{
21.                 displayToggle(tabArray[i]+"_container",true,'container on');
22.                 document.getElementById(tabArray[i]).className = 'selected';
23.                 found = true;
24.             }
25.         }
26.         return found;
27.     }
28.     //showtab函數會調用這個函數來隱顯內容盒        
29.     function displayToggle(id, show, newClass){
30.         var obj = document.getElementById(id);
31.         if(obj != null){                
32.             if(show){
33.                 obj.style.visibility="visible";
34.                 obj.style.display="block";
35.             }else{
36.                 obj.style.visibility="hidden";
37.                 obj.style.display="none";
38.             }
40.             if(newClass != null)
41.                 obj.className = newClass;
42.         }
43.     }
44. //]]>
45. </script>

看看HTML的代碼吧！相信大家都猜了個大概:

1.     <div id="sitepage">
2.         <div id="productBSS" class="tabwidget">
3.             <ul class="tabs">
4.                 <li id="item1">
5.                     <a id="info3" href="#info3" onclick="showTab('item1'); return false;">Description</a>
6.                 </li>
7.                 <script language="JavaScript">
8.                     tabArray.push('item1');
9.                 </script>
10.                 <li id="item2">
11.                     <a id="info8" href="#info8" onclick="showTab('item2'); return false;">Sample Content</a>
12.                 </li>
13.                 <script language="JavaScript">
14.                     tabArray.push('item2');
15.                 </script>
16.             </ul>
17.         </div>
18.         <div id="bssContent">
19.             <div id="item1_container">
20.                 <!--detail content-->
21.             </div>
22.             <div id="item2_container">
23.                 <!--detail content-->
24.             </div>
25.         </div>
26.        <script language="JavaScript">
                  showDefaultTab();
           </script>
27.     </div>

最後是CSS的樣式定義:

1. <style type="text/css">
2. <!--
3. body {margin:150px 0 0 0;font-size:0.8em;font-family:"Lucida Grande", Arial, Helvetica, sans-serif;}
4. div#sitepage{ margin:0 0 0 184px; padding:0; width:400px;height:auto;}
5. div#productBSS { clear:both; }
6. div#bssContent { margin:-1px 0 0 0; padding:1em; border-right:1px solid #C7C8CA; border-left:1px solid #C7C8CA;  border-bottom:1px solid #C7C8CA; border-top:1px solid #C7C8CA; }
7. /* - Tab Widget (blog sidebar) - */
8. div.tabwidget { border-left: 1px solid #C7C8CA; position: relative; }
9. /* tab control */
10. div.tabwidget ul.tabs { list-style: none; margin: 0; padding: 0 0 1px 0; height: 2em; border-bottom: 1px solid #C7C8CA; }
11. div.tabwidget ul.tabs li { display: block; float: left; background-color:#EEE; border: 1px solid #C7C8CA; border-width: 1px 1px 1px 0; padding: 0 1em; line-height: 2em; margin: 0; }
12. div.tabwidget ul.tabs li.selected { background-color: #FFF; border-bottom: 1px solid #FFF; }
13. /* layer control */
14. div.tabwidget div.container { display: none; clear: both; border: 1px solid #C7C8CA; border-width: 0 1px 1px 0; position: relative; }
15. div.tabwidget div.on { display: block; }
16. /* Content control */
18. :link,:visited { text-decoration:none; }
19. a:link { color:#004F7F; } 
20. a:visited { color:#2E87B2; }
21. a:hover, a:active { color:#004F7F; text-decoration:underline; }
22. -->
23. </style>

最值的學習的是：javascript數組在這過程的應用!有人會說！寫入程式碼不是更好麼!不就少了至少一個函數和兩個push操作.這種表現形式是死的！但要靈活運用人家寫代碼的思維！如果你只學習人家的表面形式. 哪沒什麼好說的!