javascript+css 标签显示方式的思考收藏

核心提示：星期天看了很多国外的图书出版商的网站！发现Sams的标签显示方式的实践思路不错！标签显示的实践方式一般都要用到:javascript,来动态改变div的显示和隐藏.来看看人家写的JS代码吧:<script type="text/Javascript"> //<![CDATA[ /

星期天看了很多国外的图书出版商的网站！发现Sams的标签显示方式的实践思路不错！标签显示的实践方式一般都要用到:javascript,来动态改变div的显示和隐藏.来看看人家写的JS代码吧:

<script type="text/Javascript">
//<![CDATA[
　　　　 //标签的数组,如果让我写,我想不到会用这个保存
　  var tabArray = new Array();
　　　　 //默认显示哪个标签
　  function showDefaultTab(){
　　　  //show 'Description' tab by default, else show first
　　　  if(!showTab('item1')){
　　　　　　 displayToggle(tabArray[0]+"_container",true,'container on');
　　　　　　 document.getElementById(tabArray[0]).className = 'selected';
　　　　 }
　　 }
　　　　 //改变内容盒的隐显,并重绘显示样式:感觉有点像配适器模式
　  function showTab(tabID){
　　　  var found = false;
　　　  for(var i=0; i < tabArray.length; i++){
　　　　　  if(tabArray[i] != tabID){
　　　　　　　　 displayToggle(tabArray[i]+"_container",false, 'container');
　　　　　　　　 document.getElementById(tabArray[i]).className = '';
　　　　　　 }else{
　　　　　　　　 displayToggle(tabArray[i]+"_container",true,'container on');
　　　　　　　　 document.getElementById(tabArray[i]).className = 'selected';
　　　　　　　　 found = true;
　　　　　　 }
　　　　 }
　　　  return found;
　　 }
　  //showtab函数会调用这个函数来隐显内容盒　　　　
　  function displayToggle(id, show, newClass){
　　　  var obj = document.getElementById(id);
　　　  if(obj != null){　　　　　　　　
　　　　　  if(show){
　　　　　　　　 obj.style.visibility="visible";
　　　　　　　　 obj.style.display="block";
　　　　　　 }else{
　　　　　　　　 obj.style.visibility="hidden";
　　　　　　　　 obj.style.display="none";
　　　　　　 }

　　　  if(newClass != null)
　　　　　　　　 obj.className = newClass;
　　　　 }
　　 }
//]]>
</script>

看看HTML的代码吧！相信大家都猜了个大概:

　  <div id="sitepage">
　　　  <div id="PRoductBSS" class="tabwidget">
　　　　　  <ul class="tabs">
　　　　　　　  <li id="item1">
　　　　　　　　　  <a id="info3" href="#info3" >Description</a>
　　　　　　　  </li>
　　　　　　　  <script language="JavaScript">
　　　　　　　　　　 tabArray.push('item1');
　　　　　　　  </script>
　　　　　　　  <li id="item2">
　　　　　　　　　  <a id="info8" href="#info8" >Sample Content</a>
　　　　　　　  </li>
　　　　　　　  <script language="JavaScript">
　　　　　　　　　　 tabArray.push('item2');
　　　　　　　  </script>
　　　　　  </ul>
　　　  </div>
　　　  <div id="bssContent">
　　　　　  <div id="item1_container">
　　　　　　　  <!--detail content-->
　　　　　  </div>
　　　　　  <div id="item2_container">
　　　　　　　  <!--detail content-->
　　　　　  </div>
　　　  </div>
　　　 <script language="JavaScript">
　　　　　　　 showDefaultTab();
　　　 </script>
　  </div>

最后是CSS的样式定义:

<style type="text/css">
<!--
body {margin:150px 0 0 0;font-size:0.8em;font-family:"Lucida Grande", Arial, Helvetica, sans-serif;}
div#sitepage{ margin:0 0 0 184px; padding:0; width:400px;height:auto;}
div#productBSS { clear:both; }
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; }
/* - Tab Widget (blog sidebar) - */
div.tabwidget { border-left: 1px solid #C7C8CA; position: relative; }
/* tab control */
div.tabwidget ul.tabs { list-style: none; margin: 0; padding: 0 0 1px 0; height: 2em; border-bottom: 1px solid #C7C8CA; }
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; }
div.tabwidget ul.tabs li.selected { background-color: #FFF; border-bottom: 1px solid #FFF; }
/* layer control */
div.tabwidget div.container { display: none; clear: both; border: 1px solid #C7C8CA; border-width: 0 1px 1px 0; position: relative; }
div.tabwidget div.on { display: block; }
/* Content control */

:link,:visited { text-decoration:none; }
a:link { color:#004F7F; }
a:visited { color:#2E87B2; }
a:hover, a:active { color:#004F7F; text-decoration:underline; }
-->
</style>

最值的学习的是：javascript数组在这过程的应用!有人会说！硬编码不是更好么!不就少了至少一个函数和两个push操作.这种表现形式是死的！但要灵活运用人家写代码的思维！如果你只学习人家的表面形式. 哪没什么好说的!