JS implements fully semantic web page tab effect code_javascript skills-JS Tutorial-php.cn

JS implements fully semantic web page tab effect code_javascript skills

WBOY

Release： 2016-05-16 15:39:24

Original

1116 people have browsed it

The example in this article describes the JS implementation of fully semantic web page tab effect code. Share it with everyone for your reference. The details are as follows:

This is a completely semantic JS web page tab. It includes two usages, one is click type and the other is sliding door type. Which one to use depends on your own needs. Sliding Doors are triggered when the mouse passes over them, and tabs require mouse clicks.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows:

<!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>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming.