学步园

         最近给学院网站添了个分栏，表面上很简单，却还含了不少技术成分。当然这东西是通过js+css实现的。首先是js的编写，不过算是简单的，重头戏是css的编写。
先附上js:        这里是是显示信息的两栏，class为activecontent表示层可见，hidedencontent反之，写在css中。

<script type="text/javascript">
    tabCount = 2;
    function changeTab(tabIndex)
    ...{
        for (i = 1; i <= tabCount; i++)
        ...{
            tab = document.getElementById("FenceTab" + i);   
            content = document.getElementById("TopTenContent" + i);
            marquee = document.getElementById("marquee" + i);
            marquee.start();
            if (i == tabIndex)
            ...{
                tab.className = "active";   
                content.className = "activecontent";                
            }
            else
            ...{
                tab.className = "";
                content.className = "hiddencontent";
                marquee.stop();
            }
        }
    }
</script>

<%...--begin 分栏  Author: Jawf--%>
 <div id="TopTenContent1" class="activecontent">
   <marquee direction="up" scrollamount="1" scrolldelay="15" id=marquee1  onmouseover=marquee1.stop() onmouseout=marquee1.start()>      
    <%...//里面是从数据库中取公告的代码%>
   </marquee>
 </div>    
 <div id="TopTenContent2" class="hiddencontent"> 
   <marquee direction="up" scrollamount="1" scrolldelay="15" id=marquee2  onmouseover=marquee2.stop() onmouseout=marquee2.start()>     
    <%...//里面是从数据库中取通知的代码%>
   </marquee>
 </div>

        这里是选择哪一栏的标记，我采用的是图片，在css中可以看得出来是切换图片 

 <div id="fence">
   <li id="fence1"><a id="FenceTab1" onmouseover="changeTab(1);" onclick="return false;" class="active" href="#"><img src="common/images/spacer.gif" alt="学院公告" width="81" height="20" /></a> </li>
   <li id="fence2"><a id="FenceTab2" onmouseover="changeTab(2);" onclick="return false;" href="#"><img src="common/images/spacer.gif" alt="教学通知" width="81" height="20" /></a></li>
 </div>
 <%...--end 分栏--%> 

附css:

/**//*begin 分栏 Author: Jawf*/
ul {...}{
 margin: 0;
 padding: 0;
}
#rightbottom #fence{...}{
 height: 20px;
 width: auto;
 line-height: 20px;
 background-position: left;
 text-align: left;
}
#rightbottom li {...}{
  display: inline;
  overflow: hidden;
  list-style-type: none;
  margin: 0px; }

#rightbottom #fence1{...}{
 margin:2px 0px 0px 0px;
 padding:0px;
 border:0px;
 width:81px;
 height:20px;
 text-align:left; 
}
#rightbottom #fence1 a{...}{background: url(../images/fence11.gif) no-repeat left bottom;}
#rightbottom #fence1 a.active {...}{background: url(../images/fence12.gif) no-repeat left bottom;}
#rightbottom #fence1 a.active:hover{...}{background: url(../images/fence12.gif) no-repeat left bottom;}
#rightbottom #fence2{...}{
 margin:2px 0px 0px 0px;
 padding:0px;
 border:0px;
 width:81px;
 height:20px;
 text-align:left; 
}
#rightbottom #fence2 a{...}{background: url(../images/fence21.gif) no-repeat left bottom;}
#rightbottom #fence2 a.active{...}{background: url(../images/fence22.gif) no-repeat left bottom;}
#rightbottom #fence2 a.active:hover{...}{background: url(../images/fence22.gif) no-repeat left bottom;}

.activecontent
{...}{
 text-align: justify;
 padding: 2px;
 z-index: 2;
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
}

.activecontent a {...}{
  text-decoration: none;
  color: #00f; }

.activecontent a:hover
{...}{
    text-decoration: underline;
}

.activecontent ol
{...}{
    margin: 5px 5px 5px 25px !important;
    margin: 5px 5px 5px 30px;
    padding: 0px;
}

.activecontent li
{...}{
    margin: 0px;
    padding: 0px;
}

.hiddencontent
{...}{
    display: none;
}
/**//*end 分栏*/