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数组在这过程的应用!