选项卡的制作和数组

总结今天 所学的知识

利用js制作选项卡

 //css样式部分
                *{
list-style: none;
padding: 0px;
margin: 0px;
}
ul li{
float: left;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
background: red;
margin-right: 2px;
border-top: 2px solid transparent;
                cursor: pointer;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
#con p{
width: 404px;
height: 200px;
border: 1px solid red;
display: none;/*隐藏*/
}
.active{
border-top: 2px solid black;
}


            //script部分：
            <script type="text/javascript">
               window.onload=function(){
//首先要声明变量  获取变量名
var oBox=document.getElementById('box');
                    var oBtn=oBox.getElementsByTagName('li');
                    var oCon=document.getElementById('con');
                    var oTitle=oCon.getElementsByTagName('p');
                    
                //利用for循环  遍历 主要就是让每一个都能够赋予鼠标事件
                    for(var i=0;i<oBtn.length;i++){
                    oBtn[i].index=i  
                    oBtn[i].onclick=function(){
                    for(var j=0;j<oTitle.length;j++){//循环的目的就是为了先清除所有样式
                    oTitle[j].style.display='none';
                    oBtn[j].className="";
                    }
                                //点击时点击的对象能够实现赋予的显示
                    oTitle[this.index].style.display='block';
                    oBtn[this.index].className="active";
                    }
                    }
}
            </script>




//body部分
<div id="box">
    <ul class="clearfix">
            <li>体育</li>
            <li>瑜伽</li>
            <li>运动</li>
            <li>新闻</li>
    </ul>
    <div id="con">
        <p>体育</p>
        <p>瑜伽</p>
        <p>运动</p>
        <p>新闻</p>
     </div>
</div>

这是最基本的选项卡的制作，一般把基本的熟悉了解了之后就会发现，其实很多看着难又好看的选项卡都是这个基础延伸出去的。

所有说前期的基础是很重要的，加油！

接下来讲一下Array（数组）对象

数组对象的作用是：使用单独的变量名来存储一系列的值。

首先就是创建数组，为其赋值：

  

假如你有一组数组（例如：车名字），存在单独变量如下所示：

 

var car1="Saab";

var car2="Volvo";

var car3="BMW";

如果说你要找的车远不止三四辆呢？ 那这个时候最好的方法就是数组啦！

数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。

数组里面的每个元素都有自己的ID，以便它可以很容易地被访问到。

创建一个数组

创建一个数组，有三种方法：

1、常规方式：

 

 var mycars = new Array();

    mycars[0] = "Saab";

    mycars[1] = "Volvo";

    mycars[2] = "BMW";

2、简洁方式：

 

var myCars=new Array("Saab" ,"Volvo", "BMW");

3、字面：

 

var mycars=new Array("Saab","Volvo","BMW");

访问数组

通过制定数组名以及索引号码，你可以访问某个特定的元素。

以下实例可以访问myCars[0]数组的第一个值;

var name = myCars[0];

以下实例修改了数组myCars的第一个元素：

 

myCars[0]="Opel"

[0]是数组的第一个元素。 [1]是数组的第二个元素。

在一个数组中你可以有不同的对象

所有的javascript变量都是对象。数组元素第对象。函数第对象。

因此，你可以在数组中有不同的变量类型。

你可以在一个数组找那个包含对象元素、函数、数组：

 

    mycars[0] = "Saab";

    mycars[1] = "Volvo";

    mycars[2] = "BMW";

<script>

    var i;

    var mycars = new Array();

    mycars[0] = "Saab";

    mycars[1] = "Volvo";

    mycars[2] = "BMW";

    for (i=0;i<mycars.length;i++){

        document.write(mycars[i] + "<br />");

            }

</script>