选项卡

Purple_

于 2013-12-08 14:31:17 发布

阅读量395

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u013081066/article/details/17200497

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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>

Purple_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡

选项卡#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:5
复制链接

扫一扫