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

来源：互联网发布：淘宝店图片制作ps教程编辑：程序博客网时间：2024/05/08 18:04

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" onclick="showTab('item1'); return false;">Description</a> 
                </li> 
                <script language="JavaScript"> 
                    tabArray.push('item1'); 
                </script> 
                <li id="item2"> 
                    <a id="info8" href="#info8" onclick="showTab('item2'); return false;">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数组在这过程的应用!