search

Home  >  Article  >  Web Front-end  >  JS implements the same web page layout sliding door and TAB tab example_javascript skills

JS implements the same web page layout sliding door and TAB tab example_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:38:241062browse

The example in this article describes the JS implementation of the same web page layout sliding door and TAB tab. Share it with everyone for your reference. The details are as follows:

Here is a demonstration of the effect of sliding doors and TAB tabs in the same web page layout. In fact, there is not much difference between sliding doors and tabs. It is just a difference in mouse movements. However, sometimes more than two are laid out in the same web page. Tabs are always prone to confusion and lead to JS errors. If you need to do this, please refer to this example to help you solve this problem.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-web-hd-tab-menu-style-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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>修正版的网页Tab滑动门</title>
<style>
*{margin:0;padding:0;}
body{margin:50px;font-size:12px;color:#666;}
li{list-style:none;}
.list{width:378px;height:100px;padding:10px;font-size:14px;line-height:24px;border:1px #cfedff solid;border-top:0;}
.tab{width:398px;height:34px;border:1px #cfedff solid;border-bottom:0;background:url(images/title.gif) repeat-x;}
.tab ul{margin:0;padding:0;}
.tab li{float:left;padding:0 30px;height:34px;line-height:34px;text-align:center;border-right:1px #ebf7ff solid;cursor:pointer;}
.tab li.now{color:#5299c4;background:#fff;font-weight:bold;}
.block{display:block;}
</style>
<script type="text/javascript">
function setTab(name,num,n){
  for(i=1;i<=n;i++){
    var menu=document.getElementById(name+i);
    var con=document.getElementById(name+"_"+"con"+i);
    menu.className=i==num&#63;"now":"";
     con.style.display=i==num&#63;"block":"none"; 
  }
}
</script>
</head>
<body>
<h1>TAB切换onMouse</h1>
 <div class="tab">
  <ul>
   <li id="one1" onmouseover="setTab('one',1,4)" class="now">儒家</li>
   <li id="one2" onmouseover="setTab('one',2,4)">法家</li>
   <li id="one3" onmouseover="setTab('one',3,4)">墨家</li>
   <li id="one4" onmouseover="setTab('one',4,4)">道家</li>
  </ul>
 </div>
 <div class="list">
  <div id="one_con1">
    <div style="background:#333;"><span>儒家，代表人物为孔丘、孟轲，代表作《春秋》、《论语》、《孟子》。 </span></div>
  </div>
  <div id="one_con2" style="display:none;">
    <div style="background:#ff0;"><span>法家，代表人物韩非、李斯、管仲、商鞅，代表作《韩非子》、《管子》。 </span></div>
  </div>
  <div id="one_con3" style="display:none;">
   <div style="background:#f00;"><span>墨家，代表人物墨翟，代表作《墨子》。 </span></div>
  </div>
  <div id="one_con4" style="display:none;">
   <div style="background:#e45;"><span>道家，代表人物李耳、庄周，代表作《老子》、《庄子》。 </span></div>
  </div>
 </div>
 <br /><br /><br />
<h1>TAB切换onClick</h1>
 <div class="tab">
  <ul>
   <li id="two1" onclick="setTab('two',1,4)" class="now">儒家</li>
   <li id="two2" onclick="setTab('two',2,4)">法家</li>
   <li id="two3" onclick="setTab('two',3,4)">墨家</li>
   <li id="two4" onclick="setTab('two',4,4)">道家</li>
  </ul>
 </div>
 <div class="list">
  <div id="two_con1">
    <div style="background:#333;"><span>儒家，代表人物为孔丘、孟轲，代表作《春秋》、《论语》、《孟子》。 </span></div>
  </div>
  <div id="two_con2" style="display:none;">
    <div style="background:#ff0;"><span>法家，代表人物韩非、李斯、管仲、商鞅，代表作《韩非子》、《管子》。 </span></div>
  </div>
  <div id="two_con3" style="display:none;">
   <div style="background:#f00;"><span>墨家，代表人物墨翟，代表作《墨子》。 </span></div>
  </div>
  <div id="two_con4" style="display:none;">
   <div style="background:#e45;"><span>道家，代表人物李耳、庄周，代表作《老子》、《庄子》。 </span></div>
  </div>
 </div>
</body>
</html>

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JS CSS implements a tree menu similar to QQ friends and blacklist effects_javascript skillsNext article：JS CSS implements a tree menu similar to QQ friends and blacklist effects_javascript skills

Related articles

See more