长沙网站制作_日常工作中常用到的选项卡JS介绍

发布日期:2016-11-02 11:41

今天主要介绍在日常的长沙网站制作中经常用到的简单的选项卡效果。

首先,展示一下源代码,这段代码比较简单,但是很实用。

<!--Css-->

<style>

.h1{ background:#000; color:#FFF;} //当前选中样式,就是JS中的openClass

.h2{ background:#000; color:#F00;} //未选中样式,就是JS中的closeClass

li{ width:70px; height:25px; border:1px solid; line-height:25px; list-style-type:none; text-align:center}

</style>

<!-- html -->

<body>

<div style="height:50px; width:400px; border:1px solid; margin:0 auto;">

<ul><!--选项卡:菜单层-->

<li id="a1" class="h1" style="float:left;margin-right:30px;">产品介绍</li>

<li id="a2" class="h2" style="float:left;margin-right:30px;">产品参数</li>

<li id="a3" class="h2" style="float:left;margin-right:30px;">高友评论</li>

</ul>

</div>

<!--选项卡内容:内容层-->

<div style="height:300px; width:400px; margin:0 auto;">

<div id="c1" style="background:#999; width:400px; height:300px; display:block"></div>

<div id="c2" style="background:#666; width:400px; height:300px; display:none"></div>

<div id="c3" style="background:#333; width:400px; height:300px; display:none"></div>

</div>

</body>

<!-- js -->

<script type="text/javascript">

       //选项卡

       function scrollDoor(){

       }

       scrollDoor.prototype = {

       sd : function(menus,divs,openClass,closeClass){

          var _this = this;  //判断菜单层数量和内容层数量是否一样。    

          if(menus.length != divs.length)

          {

              alert("菜单层数量和内容层数量不一样!");

              return false;

          }

          //给每一个菜单绑定鼠标滑过事件,添加openClass 

          for(var i = 0 ; i < menus.length ; i++)

          {

              _this.$(menus[i]).value = i;   

              _this.$(menus[i]).onmouseover = function(){

             

               for(var j = 0 ; j < menus.length ; j++) 

               { //所有菜单添加classClass,内容DIV不显示

                _this.$(menus[j]).className = closeClass;

                _this.$(divs[j]).style.display = "none";

               }

               //当前选中菜单添加openClass,内容DIV显示

               _this.$(menus[this.value]).className = openClass;

               _this.$(divs[this.value]).style.display = "block";   

              }

          }

          },

          //定义$函数,通过ID获取对象

       $ : function(oid){

          if(typeof(oid) == "string")

          return document.getElementById(oid);

          return oid;

       }

       }

       //实例化函数,调用sd

       var SDmodel = new scrollDoor();

       SDmodel.sd(["a1","a2","a3"],["c1","c2","c3"],"h1","h2");

</script>

下面将运用过当前JS的实例展示一下:

1、这个是去年的一个长沙网站建设项目中的实例,在原选项卡的基础上,将内容层进行了进一步优化,除了调用了当前需要推荐的文章之外,还调用的最近发表出来的文章,然后每个选项卡下都有对应栏目中的内容。

2、同一个项目中,选项卡JS的数量可以多个地方用,只需要当前选项卡菜单的ID唯一即可,菜单层数量和内容层数量对应,就不会有问题。

总结:这个选项卡效果属于非常简洁的类型,要熟悉很容易,基本上能用两到三次就可以很熟练的运用,而且原理很简单,只需要将菜单层、内容层和JS最后一行实例化函数,调用sd那里的ID还有class一一对应,效果就出来了,而且也不需要Jquery库,不会与其他的JS冲突。

以上信息由长沙网站建设--长沙蒲公英网络收集与整理,禁止用于任何商业行为