JS implémente des compétences code_javascript d'effet d'onglet de page Web entièrement sémantiques-js tutoriel-php.cn

JS implémente des compétences code_javascript d'effet d'onglet de page Web entièrement sémantiques

WBOY

Libérer： 2016-05-16 15:39:24

original

1124 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation JS d'un code d'effet d'onglet de page Web entièrement sémantique. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un onglet de page Web JS entièrement sémantique. Il comprend deux utilisations, l'une est de type clic et l'autre est de type porte coulissante. Lequel utiliser dépend de vos propres besoins. Les portes coulissantes se déclenchent lorsque la souris passe dessus. et les onglets nécessitent des clics de souris.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-yyh-web-tab-cha-nav-codes/

Le code spécifique 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>
<title>语义化的网页选项卡</title>
<style type="text/css">
 *{margin:0;padding:0;font-size:13px;line-height:1.5;}
 body{padding:20px;}
 .cur{color:#f60;border-bottom:1px solid #fff;font-weight:bold;background:#fff;cursor:default;}
 #tab_,dl{position:relative;float:left;height:100px;width:300px;}
 h4,dt{float:left;height:20px;margin:0 0 0 8px;display:inline;line-height:20px;width:60px;border:1px solid #ccc;position:relative;z-index:11;text-align:center;font-weight:normal;cursor:pointer;background:#eee;}
 .c,dd{position:absolute;top:21px;border:1px solid #ccc;left:0;width:250px;padding:20px;overflow:hidden;display:block;}
 #tab_{clear:left;}
 h1{clear:left;padding:10px 0}
 #tab_1.cur{color:#f60}
 #tab_2.cur{color:blue}
 #tab_3.cur{color:green}
</style>
</head>
<body>
<h1>mouseover</h1>
<dl id="tab">
 <dt>美国</dt>
 <dd>我都不怕</dd>
 <dt>朝鲜</dt>
 <dd>谁都怕我</dd>
 <dt>某国</dt>
 <dd>我谁都怕</dd>
</dl>
<h1>click</h1>
<div id="tab_">
 <h4>orange</h4>
 <div class="c">桔红</div>
 <h4>blue</h4>
 <div class="c">蓝色</div>
 <h4>green</h4>
 <div class="c">绿色</div>
</div>
<script type="text/javascript">
function id(elem) {return document.getElementById(elem)}
function show(elem) {elem.style.display = "";}
function hide(elem) {elem.style.display = "none";}
function next( elem ) {
 do {
 elem = elem.nextSibling;
 } while ( elem && elem.nodeType != 1 );
 return elem;
}
function tab(a, p) {
 var p = (p === undefined) &#63; {e:"onclick",n:1} : p,
  node = id(a).firstChild,
  x = [];
 p.e = (p.e === undefined) &#63; "onclick" : p.e;
 p.n = (p.n === undefined) &#63; 1 : p.n;
 node=(node.nodeType !== 1)&#63;next(node):node;
 for (var i = 1, node; node; i++, node = next(node)) {
  x[i] = node;
 }
 for (var i = 1; x[i]; i++) {
  if(i % 2 == 0){hide(x[i]);x[i-1].id=a+(i/2)}
  x[p.n*2-1].className = "cur";
  show(x[p.n*2]);
  temp = function (i) {
   if (i % 2 == 1) {
    x[i][p.e] = function () {
     for (var j = 1; x[j]; j++) {
      if (j % 2 == 0) {
       hide(x[j]);
       x[j-1].className = ""
      }
     }
     show(x[i+1]);
     x[i].className = "cur"
    }
   } else {
    return null
   }
  }(i)
 }
}
tab("tab",{e:"onmouseover",n:2});
tab("tab_")
</script>
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à la programmation JavaScript de chacun.