总结今天 所学的知识
利用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.οnlοad=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].οnclick=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>
*{
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.οnlοad=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].οnclick=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>