JavaScript选项卡

最新推荐文章于 2024-09-14 19:44:09 发布

晋级的菜鸟

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量217

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/zhang_xiansen/article/details/60809731

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
       .box .on{background: red;}
       .box div{border: 1px solid red;width: 200px;height: 200px;display: none;}
       .box .show{display: block;}
    </style>
    <script>
        function tab(id){          //封装命名函数

            var oBox=document.getElementById(id);

            var aBtn=oBox.getElementsByTagName ('input');

            var aDiv=oBox.getElementsByTagName ('div');

            //循环所有加事件

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

                aBtn[i].index=i;

                aBtn[i].οnclick=function(){

                    //清空所有class

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

                    aBtn[i].className='';

                    aDiv[i].className='';

                    //当前加class

                    this.className='on';

                    aDiv[this.index].className='show';

};

        window.οnlοad=function(){

            tab('box');     //调用函数

            tab('box2');

    </script> 
</head>
<body>
<div id="box" class="box">
<input class="on" type="button" value="登录"/>
<input type="button" value="注册"/>
<input type="button" value="注销"/>
<div class="show">111111</div>
<div>222222</div>
<div>333333</div>
</div>
<div id="box2" class="box">
<input class="on" type="button" value="登录"/>
<input type="button" value="注册"/>
<input type="button" value="注销"/>
<div class="show">111111</div>
<div>222222</div>
<div>333333</div>
</div>
</body>
</html>

附加注释

事件——用户操作
	window.onload 		页面加载完成
	onclick  			点击 			
	onmouseover 		鼠标移入
	onmouseout 			鼠标移出

变量——别名
	var name=value;
	object 

函数
	function (){} 			匿名函数
	function show(){} 		命名函数

获取元素
	document.getElmentById('id');
	document  		文档
	getElmentById	通过id来获取一个元素

判断语句
	if(ok){ 			//里面的条件只有真和假
		语句1
	}else{
		语句2
	}

点
	.  的  操作属性

= 	赋值

==	判断 比较

---------------------------------------

事件
	onfocus 		获得焦点
	onblur			失去焦点

a href="#"
a href="javascript:;";

获取标签
	get Elements By TagName
	获取  一组圆 通过  标签名
		通过标签名来获取一组元素

	一组元素有下标
		[0] 		从0开始

循环
	初始化
	条件
	语句
	自增

	i=i+1;
	i+=1;
	i++;
	var i=0;
	while(i<6){alert(i); i++};
	for(var i=0; i<6; i++){alert(1);}

长度
	length

选项卡 
	
this	当前

class在js里面是一个唯一特殊的东西
	className

效果图