<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style>
#div1{
width:200px;
height:200px;
background:purple;
}
#div2 ul {
list-style:none;
}
#city ul li{
display:inline-block;
width:100px;
height:50px;
background:#666;
line-height:50px;
text-align:center;
}
#henan , #hebei , #shanxi{
float:left;
background:#666;
height:80px;
width:100px;
margin-top:-16px;
}
#henan{
margin-left:40px;
display:block;
}
#henan ul{
margin-left:-15px;
}
#hebei{
position:absolute;
top:316px;
left:156px;
}
#shanxi{
position:absolute;
top:316px;
left:264px;
}
#hebei , #shanxi{
display:none;
}
#div4 #square{
width:200px;
height:200px;
background:lightblue;
}
#div5 div{
width:200px;
height:200px;
border:1px solid #000;
background:#aaa;
display:none;
}
.active{
background:purple;
}
</style>
</head>
<body>
<input type="button" value="浅蓝" onClick="setColor('lightblue')"/>
<input type="button" value="粉色" onClick="setColor('pink')"/>
<input type="button" value="橙色" onClick="setColor('orange')"/>
<div id="div1"></div>
<div id="div2">
<div id="city">
<ul>
<li onMouseOver="heNan()">河南</li>
<li onMouseOver="heBei()">河北</li>
<li onMouseOver="shanXi()">陕西</li>
</ul>
</div>
<div id="henan">
<ul>
<li>郑州</li>
<li>三门峡</li>
<li>灵宝</li>
</ul>
</div>
<div id="hebei">
<ul>
<li>北京</li>
<li>石家庄</li>
<li>廊坊</li>
</ul>
</div>
<div id="shanxi">
<ul>
<li>西安</li>
<li>咸阳</li>
<li>潼关</li>
</ul>
</div>
</div> <br/><br/><br/><br/><br/>
<div id="div3">
<input type="text" id="txt1"/>
<input type="button" value="login" onClick="first('value')"/>
</div>
<div id="div4">
<input type="button" value="变宽" onClick="toChange('width','400px')"/>
<input type="button" value="变高" onClick="toChange('height','400px')"/>
<input type="button" value="变紫" onClick="toChange('background','purple')"/>
<div id="square"></div>
</div>
<div id="div5">
<input type="button" value="语文" class="active"/>
<input type="button" value="数学"/>
<input type="button" value="英语"/>
<input type="button" value="科学"/>
<div style="display:block;">我是语文</div>
<div>我是数学</div>
<div>我是英语</div>
<div>我是科学</div>
</div>
<script>
function setColor(color){
var div1=document.getElementById("div1");
div1.style.background=color;
}
//上面第一个效果为简单的实现颜色选项卡之间的互换
/*function heNan(){
var hN=document.getElementById("henan");
var hB=document.getElementById("hebei");
var sX=document.getElementById("shanxi");
hN.style.display="block";
hB.style.display="none";
sX.style.display="none";
}
function heBei(){
var hN=document.getElementById("henan");
var hB=document.getElementById("hebei");
var sX=document.getElementById("shanxi");
hN.style.display="none";
hB.style.display="block";
sX.style.display="none";
}
function shanXi(){
var hN=document.getElementById("henan");
var hB=document.getElementById("hebei");
var sX=document.getElementById("shanxi");
hN.style.display="none";
hB.style.display="none";
sX.style.display="block";
}*/
//以上为方法一
var hN=document.getElementById("henan");
var hB=document.getElementById("hebei");
var sX=document.getElementById("shanxi");
function heNan(){
hN.style.display="block";
hB.style.display="none";
sX.style.display="none";
}
function heBei(){
hN.style.display="none";
hB.style.display="block";
sX.style.display="none";
}
function shanXi(){
hN.style.display="none";
hB.style.display="none";
sX.style.display="block";
}
//第二种方法,将局部变量定义为全局变量,这个部分注意javascript放置的位置
//第三种方法,用for循环 和 this 来写选项卡
//四个选项卡,当你点击某个的时候 按钮发生变化,并且内容随之改变
//1:四个中,有一个是原本就被选中,且背景发生变化(active),显示内容的
window.οnlοad=function(){
var divF=document.getElementById("div5");
var aDiv=divF.getElementsByTagName("div");
var aBtn=divF.getElementsByTagName("input");
//获取到所有的input之后,要用循环 使其发生改变
for(var i=0;i<aBtn.length;i++){
//自己定义一个index 属性,即将当前的i值给index
aBtn[i].index=i;//意思是某个按钮 有个index index的值为i
aBtn[i].οnclick=function (){
//先进行外部循环 外部循环一次,内部循环 aBtn.length次,并将这些全部运行一下两个效果
for(var j=0;j<aBtn.length;j++){
aBtn[j].className="";
//当点击的时候这个事件同时发生
aDiv[j].style.display="none";
}
//this就是指的是当前你所触发的事件的东西 在这里指的是按钮button 将其样式给你当前点击的这个button还有与button对应的内容,所以这些内容要写在下面
this.className="active";
aDiv[this.index].style.display="block";
}
}
};
/*function first(){
var txt=document.getElementById("txt1");
txt.value="abckdefg";
}//此为第一种操作属性地方法,用点进行连接
*/
/*function first(){
var txt=document.getElementById("txt1");
txt['value']="abckdefg";
}//此为第二种操作属性地方法,用[]进行连接
*/
/*function first(){
var abc='value';
var txt=document.getElementById("txt1");
txt[abc]="abckdefg";
}//此为第三种方法,将属性赋给一个变量
*/
function first(name){
var txt=document.getElementById("txt1");
txt1[name]="nishishei";
}//这是第四种最重要 最简便的方法,因为具体的属性名称可以改变
function toChange(name,value){
var square=document.getElementById("square");
square.style[name]=value;
}
</script>
</body>
</html>