Explication de l'effet de changement d'étiquette d'onglet à l'aide de JavaScript-js tutoriel-php.cn

Explication de l'effet de changement d'étiquette d'onglet à l'aide de JavaScript

巴扎黑

Libérer： 2017-08-17 14:13:47

original

1712 Les gens l'ont consulté

Il s'agit d'un effet de changement d'onglet basé sur js. Il s'agit d'un code source d'effet de changement d'onglet produit par javascript natif sans jQuery. Cliquez sur le titre ci-dessus pour réaliser la fonction de changement de page correspondante, ce qui est d'une grande valeur pratique. Rendu des opérations :

Conseils : Si le navigateur ne peut pas fonctionner normalement, vous pouvez essayer de changer de mode de navigation. Le code d'effet de changement d'étiquette d'onglet implémenté dans js pour partager avec tout le monde est le suivant

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现tab标签切换效果</title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ font-size:12px;}

#menu{width:360px; overflow:hidden; margin:100px auto;border:1px solid #BF9660;}
#menu #nav {display:block;width:100%;padding:0;margin:0;list-style:none;}
#menu #nav li {float:left;width:120px;}
#menu #nav li a {display:block;line-height:27px;text-decoration:none;padding:0 0 0 5px; text-align:center; color:#333;}
#menu_con{ width:358px; height:135px; border-top:none}
.tag{ padding:10px; overflow:hidden;}
.selected{background:#C5A069; color:#fff;}
</style>
</head>
<body>

<!--代码部分begin-->
<p id="menu">
<!--tag标题-->
  <ul id="nav">
    <li><a href="#" class="selected">jQuery特效</a></li>
    <li><a href="#" class="">tab切换</a></li>
    <li><a href="#" class="">菜单导航</a></li>
  </ul>
<!--二级菜单-->
  <p id="menu_con">
    <p class="tag" style="display:block">
      这里是jQuery特效内容列表
     </p> 
    <p class="tag" style="display:none">
      这里是tab切换效果  
     </p> 
    <p class="tag" style="display:none">
      这里是菜单导航效果
    </p> 
</p>
</p>
<script>
var tabs=function(){
  function tag(name,elem){
    return (elem||document).getElementsByTagName(name);
  }
  //获得相应ID的元素
  function id(name){
    return document.getElementById(name);
  }
  function first(elem){
    elem=elem.firstChild;
    return elem&&elem.nodeType==1? elem:next(elem);
  }
  function next(elem){
    do{
      elem=elem.nextSibling; 
    }while(
      elem&&elem.nodeType!=1 
    )
    return elem;
  }
  return {
    set:function(elemId,tabId){
      var elem=tag("li",id(elemId));
      var tabs=tag("p",id(tabId));
      var listNum=elem.length;
      var tabNum=tabs.length;
      for(var i=0;i<listNum;i++){
          elem[i].onclick=(function(i){
            return function(){
              for(var j=0;j<tabNum;j++){
                if(i==j){
                  tabs[j].style.display="block";
                  //alert(elem[j].firstChild);
                  elem[j].firstChild.className="selected";
                }
                else{
                  tabs[j].style.display="none";
                  elem[j].firstChild.className="";
                }
              }
            }
          })(i)
      }
    }
  }
}();
tabs.set("nav","menu_con");//执行
</script>
<!--代码部分end-->


</body>
</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!