码迷,mamicode.com
首页 > 编程语言 > 详细

javascript:class="active"的几个方法

时间:2015-05-26 23:14:25      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:

方法一:

html代码:
<ul id="menu1">
   <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>
   <li onmouseover="setTab(1,1)"><a href="#">评论</a></li>
   <li onmouseover="setTab(1,2)"><a href="#">技术</a></li>
   <li onmouseover="setTab(1,3)"><a href="#">点评</a></li>
  </ul>
js代码:
function setTab(m,n){
 var tli=document.getElementById("menu"+m).getElementsByTagName("li");
 var mli=document.getElementById("main"+m).getElementsByTagName("ul");
 for(i=0;i<tli.length;i++){
  tli[i].className=i==n?"hover":"";
  mli[i].style.display=i==n?"block":"none";
 }
}
方法二:
html代码:
 <div class="menu2box">
  <div id="tip2"></div>
  <ul id="menu2">
   <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>
   <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>
   <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>
   <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>
  </ul>
 </div>
  <div class="main" id="main2">新闻内容 </div>
js代码:
var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
function nowtab(m,n){
 if(n!=0 && m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
 document.getElementById("tip"+m).style.left=n*100+‘px‘;
 document.getElementById("main2").innerHTML=m3[n];
}
 
 
方法三:
html代码:
<ul class="ccc">
              <li ><a name="checkme"class="jjjj" href="#carousel-example-generic">首页</a></li>
              <li ><a name="checkme" href="#contain-box">企业简介</a></li>
               <li ><a name="checkme" href="#contain-box2">联系我们</a></li>
        </ul>
 
js代码:
var indexNow = 0;
var a=document.getElementsByName(‘checkme‘);
for(i=0;i<a.length;i++){
  a[i].index = i; 
  a[i].onclick=function(){      
        indexNow = this.index;    
        toggleClass();       
  }
}
 
function toggleClass(){
  for(i = 0; i < a.length; i++){
      a[i].className = ‘‘;
    }
   a[indexNow].className = ‘jjjj‘; 
}

javascript:class="active"的几个方法

标签:

原文地址:http://www.cnblogs.com/baby-lijun/p/4531904.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!