<强> php练习javascript, JQuey制作页面切换
<强>一。重点:css样式,js的dom取值,js的事件
JQuey引入地址
& lt;脚本类型=拔谋?javascript"src=" https://cdn.bootcss.com/jquery/2.2.4/jquery.js " https://www.yisu.com/zixun/祝辞& lt;/script>
<强>二. js原生代码
& lt; !DOCTYPE html>
& lt; html>
& lt;头lang=癳n"在
& lt;元charset=癠TF-8"在
& lt; title>实践题——选项卡& lt;/title>
& lt;风格类型=拔谋?css"在
/ CSS样式制作/
{保证金:0;填充:0;字体:正常12 px“微软雅黑“;颜色:# 000000;}{
标签宽度:290 px;身高:150 px;填充:5 px;保证金:20 px;}
标签ul {list-style:没有;显示:块;高度:30 px;行高:30 px;}
标签ul李{
浮动:左;宽度:60 px;高度:28 px;行高:28 px;text-align:中心;
显示:inline-block;保证金:0 px 3 px;边界:1 px固体# aaa;边界底部:没有。
光标:指针;背景:# fff;list-style:没有;
}
标签ul。在{border-top: 2 px固体重褐色;边界底部:2 px固体# fff;}
标签div {
身高:120 px;行高:25 px;边界:1 px固体# 336699;border-top: 2 px重褐色固体;填充:5 px;}
hide{显示:没有;}
& lt;/style>
& lt;脚本类型=拔谋?javascript"src=https://www.yisu.com/zixun/" jquery-1.10.2.min.js ">
<强>//JS实现选项卡切换
窗口。onload=function () {
var oTab=. getelementbyid (“tabs");
var oUl=oTab.getElementsByTagName (“ul") [0];
var奥利=oUl.getElementsByTagName (“li");
var oDivs=oTab.getElementsByTagName (“div");
(var i=0; i< oLis.length;我+ +){
奥利[我]。指数=我;
//var文本=奥利[我].getAttribute (“index");
//document . write(文本+“& lt; br>“);
//console.log(奥利[我].innerHTML);
奥利[我]。onclick=function () {
(var n=0; n< oLis.length; n + +) {
奥利[n]。className=啊?br/> oDivs [n]。className=癶ide"
}
。className=爸馈?br/> oDivs [this.index]。className=啊?br/>}
}
}
& lt;/head>
& lt; body>
& lt; !——HTML页面布局——在
& lt; div id=皌abs"在
& lt; ul>
& lt;李类=爸?在×××& lt;/li> & lt; li>家具& lt;/li> & lt; li>二手房& lt;/li>
& lt;/ul>
& lt; div>
购昌平邻铁三居总价20多万买一居& lt; br>
内购五环三居140年万安家东三环& lt; br>
北京首现零首付楼盘53万购东5环50平& lt; br>
京楼盘直降5000中信府公园楼王现房& lt; br>
& lt;/div>
& lt; div类=癶ide"在
出租屋大改造美少女的混搭小窝& lt; br>
经典清新简欧爱家90平老房焕发新生& lt; br>
新中式的酷色温情66平撞色活泼家居& lt; br>
瓷砖就像选好老婆卫生间烟道的设计& lt; br>
& lt;/div>
& lt; div类=癶ide"在
通州豪华260万居二环稀缺2居250 w甩& lt; br>
西3环通透2居290年万130年万2居限量抢购& lt; br>
黄城根小学学区仅260万121平70万抛! & lt; br>
独家别墅280年万苏州桥2居优惠价248万& lt; br>
& lt;/div>
& lt;/body>
& lt;/html>
<强>三.jQuery写法
& lt; !DOCTYPE html>
& lt; html>
& lt;头lang=癳n"在
& lt;元charset=癠TF-8"在
& lt; title>实践题——选项卡& lt;/title>
& lt;风格类型=拔谋?css"在
/ CSS样式制作/
{保证金:0;填充:0;字体:正常13 px“微软雅黑“;颜色:# 000000;}{
标签宽度:290 px;身高:150 px;填充:5 px;保证金:20 px;}
标签ul {list-style:没有;显示:块;高度:30 px;行高:30 px;}
标签ul李{
浮动:左;宽度:60 px;高度:28 px;行高:28 px;text-align:中心;
保证金:0 px 3 px;边界:1 px固体# aaa级;边界底部:2 px;
光标:指针;背景:# fff;list-style:没有;
}
标签ul。在{border-top: 2 px固体重褐色;固体边界底部:0 # fff;border-left: 2 px固体重褐色;边境:2 px固体重褐色;}
标签div {
身高:120 px;行高:25 px;边界:1 px固体# 336699;边界:2 px固体重褐色;填充:5 px;显示:没有;}
标签div.on{显示:块;}
& lt;/style>
& lt;脚本类型=拔谋?javascript"src=" https://cdn.bootcss.com/jquery/2.2.4/jquery.js " https://www.yisu.com/zixun/祝辞& lt;/script>
& lt;脚本类型=拔谋?javascript"在
<强>//JQuery实现选项卡切换美元
(文档)时函数(){
$ (“ul li")。点击(函数(){
=$ var指数(这).index ();
美元(这).addClass(“知道).siblings () .removeClass(“知道);
$(“#标签div") hide () .eq(索引),告诉();
});
});
& lt;/script>
& lt;/head>
& lt; body>
& lt; !null
null
null
