零基础建站培训教程介绍

当前位置:

JS实现当前点击栏目显示不同样式

我们在自己建网站时,网站的某些栏目项目要求是点击某一项,所点击的当前项显示不同的样式。点击其它项时,又恢复原来样式。效果如下图:

dh

怎么实现这种效果呢?下面学做网站论坛就带领大家来做出这样的效果。

方法/步骤

  1. 在需要这种效果的位置,放上以下的HTML代码;
    
    
    <DIV class="navvlist">
     <UL>
     <LI><A href="#" class="current" onclick="change_bg(this)">脚本首页</A></LI>
     <LI><A href="#" onclick="change_bg(this)">网页特效</A> </LI>
     <LI><a href="#" onclick="change_bg(this)">精品脚本</a> </LI>
     <LI><A href="#" onclick="change_bg(this)">ASP代码</A> </LI>
     <LI><A href="#" onclick="change_bg(this)">PHP代码</A> </LI>
     <LI><A href="#" onclick="change_bg(this)">JSP代码</A> </LI>
     <LI><A href="#" onclick="change_bg(this)">脚本资源</A> </LI>
     <LI><A href="#" onclick="change_bg(this)">软件下载</A> </LI>
     </UL>
    </DIV>
  2. 在网站的CSS文件中,放上以下的CSS样式代码,用于控制相应的样式;
    
    
    .navvlist {
      MARGIN: 1px 0;
      WIDTH: 100%;
      FONT-FAMILY: verdana;
      HEIGHT: 45px;
      BACKGROUND-COLOR: #970B0B;
      font-family:Arial, Helvetica, sans-serif;
     font-size:12px;
    }
    .navvlist UL {
      PADDING: 0px;
      DISPLAY: block;
      MARGIN: 0px;
      LIST-STYLE-TYPE: none;
      HEIGHT: 45px;
      BACKGROUND-COLOR: #970B0B;
      COLOR: #ffffff;
    }
    .navvlist LI {
      BORDER-RIGHT: #ffffff 1px solid;
      DISPLAY: block;
      FLOAT: left;
      HEIGHT: 45px;
      font-family:Arial, Helvetica, sans-serif;
     font-size:12px;
    }
    .navvlist LI A {
      PADDING:1px 15px 0;
      DISPLAY: block;
      FONT-WEIGHT: none;
      COLOR: #ffffff;
      LINE-HEIGHT: 45px;
      TEXT-DECORATION: none;
    }
    .navvlist LI A:hover {
      COLOR:#562505;
      BACKGROUND-COLOR: #f4f524;
      TEXT-DECORATION: none;
    }
    .current{
     color:#ffffff;
     background:#D42524;
    }
    .navvlist li#date{
     color:#ffffff;
     PADDING:2px 15px 0;
    }
  3. 在网站的底部文件中</body>标签上面,放上以下的JS代码,用于实现这样的效果。
    
    
    <script language="javascript" type="text/javascript">
    var $c=function(array){var nArray = [];for (var i=0;i<array.length;i++) nArray.push(array[i]);return nArray;};
    Array.prototype.each=function(func){
    for(var i=0,l=this.length;i<l;i++) {func(this[i],i);};
    };
    document .getElementsByClassName=function(cn){
    var hasClass=function(w,Name){
    var hasClass = false;
    w.className.split(' ').each(function(s){
    if (s == Name) hasClass = true;
    });
    return hasClass;
    };
    var elems =document.getElementsByTagName("*")||document.all;
       var elemList = [];
       $c(elems).each(function(e){
    if(hasClass(e,cn)){elemList.push(e);}
       })
      return $c(elemList);
    };
    function change_bg(obj){
    var a=document.getElementsByClassName("navvlist")[0].getElementsByTagName("a");
    for(var i=0;i<a.length;i++){a[i].className="";}
    obj.className="current";
    }
    </script>

通过这三步的操作,我们就可以在自己做网站时,实现当前点击栏目显示不同样式的效果。

上面的例子是横向的菜单效果,如果想实现纵向的菜单效果,只需要修改CSS样式即可。如果不会修改,请学习一下HTML教程

相关功能

 

发表评论

零基础学建站就到学做网站论坛