HTML,CSS,Javascript,JQuery

HTML

一套浏览器认识的规则

标签

1.<head></head>

2.<title></title>

3.<body></body>

4.<p></p>:段落标签---->块级标签

5.<br />:换行标签

6.<h1></h1>:标题---->块级标签

......

<h6></h6>:标题

7.<span></span> ---->行内标签

8.<div></div>---->块级标签

9.<input />，<form></form>

<form action="http://localhost:8000/index" method="GET">
    <input type="text" name="user" />
    <input type="text" name="email" />
    <input type="password" name="pwd" />
    <input type="button" value="登录1"/>
    <input type="submit" value="登录2"/>     # 提交按钮
</form>

<form enctype="multipart/form-data">    # 把文件一点儿一点儿发送过去
    <div>
        <select name="city" multiple="multiple" size="10">  # 多选
            <option value="1" selected="selected">北京</option>
            <option value="2">上海</option>
            <option value="3">南京</option>
            <option value="4">成都</option>
        </select>
        <input type="text" name="user" />
        <p>请选择性别：</p>
        男：<input type="radio" name="gender" value="1" checked="checked" />  #单选框，input type="radio"  name属性相同则互斥
        女：<input type="radio" name="gender" value="2" />
        <p>爱好<p/>
        篮球：<input type="checkbox" name="favor" value="1" checked="checked" />  # 复选框    checked="checked" 默认被选中
        足球：<input type="checkbox" name="favor" value="2" checked="checked" />
        台球：<input type="checkbox" name="favor" value="3" />
        网球：<input type="checkbox" name="favor" value="4" />
        <p>技能</p>
        代码：<input type="checkbox" name="skill" value="1" checked="checked"/>
        英语：<input type="checkbox" name="skill" value="2" />
        <p>上传文件</p>
        <input type="file" name="fname" />
    </div>
    <textarea name="meno">默认内容</textarea>     # 多行文本
    <input type="submit" value="提交" />
    <input type="reset" value="重置" />
</form>

10.<a></a>

<a href="http://www.baidu.com" target="_blank">百度</a>    # 跳转的作用

<a href="i1">第一章</a>                   # 锚的作用
<a href="i2">第二章</a>
<a href="i3">第三章</a>
<a href="i4">第四章</a>
<div id="i1" style="height:600px;">第一章的内容</div>
<div id="i2" style="height:600px;">第二章的内容</div>
<div id="i3" style="height:600px;">第三章的内容</div>
<div id="i4" style="height:600px;">第四章的内容</div>

11.<img>

<a href="http://www.baidu.com">
　　<img src="1.jpg" title="美女" style="height: 200px;width: 200px;" alt="美女">
</a>

12.<table></table>

<table border="1">
    <tr>
        <td>主机名</td>
        <td>端口</td>
        <td>
            <a href="s2.html">查看详细</a>
        </td>
    </tr>
    <tr>
        <td>1.1.1.1</td>
        <td>80</td>
        <td>第二行，第3列</td>
    </tr>         
    <tr>
        <td>1.1.1.1</td>
        <td>80</td>
        <td>第二行，第3列</td>
    </tr>   
</table>

13.<thead></thead>,<tbody></tbody>

<table border="1">
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
        </tr>    
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td colspan="3">1</td>    # 横向合并单元格
        </tr>
        <tr>
            <td rowspan="2">1</td>    # 纵向合并单元格 
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>

        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>

    </tbody>
</table>

14.<label></label> 用于点击文字，使得关联的标签获取光标

<label for="username">用户名：</label>
<input id="username" type="text" name="user" />

CSS

重要：

position, background, text-align, margin, padding, z-inx, font-size, over-flow, hover, float(clear:both), line-hight, border, display

1.id选择器(不推荐),class选择器(推荐)

<div style="background-color: #2459a2;height: 48px;">ff</div>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
                background-color: #2459a2; 
                height: 48px;
        }
        .c1{
                background-color: #2459a2; 
                height: 48px;
        }
    </style>
</head>
<body>
    <div id="i1">ff</div>          # id不可以重复
    <div class="c1">2</div>     # class可以重复
    <div class="c1">3</div>
</body>

2.标签选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{                                      #找到所有的div标签,并设置样式
              background-color: black;
              color: white;
        }
    </style>
</head>

3.层级选择器

<head>                
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span div{                        #只有span中的div应用此样式   或  .c1 div
                background-color: #2459a2; 
                height: 48px;
        }
    </style>
</head>
<body>
    <div class="c1">ff</div>         
    <span class="c1">dsfsdfs
        <div id="c2">dsfsf</div>
    fdgdssf</span>
    <div class="c1">2</div>
</body>

4.组合选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2,#i3{                  # 共同应用同一样式
                background-color: #2459a2; 
                height: 48px;
        }
    </style>
</head>
<body>
    <div id="i1">ff</div>          
    <div id="i2">2</div>     
    <div id="i3">3</div>
</body>

5.属性选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[n="hello"]{ width:100px; height:200px;}
    </style>
</head>
<body>
    <input type="text" n="hello" />
    <input type="password" />
</body>

6.优先级，标签上的style优先，编写顺序，就近原则

7.边框

<body>
    <div style="border: 1px solid red;">
        sdfsd
    </div>
</body>
<div style="height: 48px;
    width:80%;
    border: 1px solid red;
    font-size: 16px;
    text-align: center;        #水平居中
    line-height: 48px;         #上下居中
    font-weight: bold;         #字体加粗
    ">sdfsdf
</div>

8.float样式

<body>
    <div style="width: 20%;background-color: red;float: left;">1</div>
    <div style="width: 80%;background-color: black;float: left;">2</div>
</body>

<head>                
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{                
                height: 38px;
                background-color: #dddddd;
                line-height: 38px;
        }
    </style>
</head>
<body style="margin: 0;auto;">
    <div class="pg-header">
        <div style="width： 980px;margin: 0 auto;">
            <div style="float: left;">收藏本站</div>
            <div style="float: right;">
                <a>登录</a>
                <a>注册</a>
            </div>
            <div style="clear: both;"></div>
        </div>
    </div>
    <div>
        <div style="width: 980px;margin: 0 auto;">
            <div style="float:left">
                Logo
            </div>
            <div style="float:right">
                <div style="height: 50px;width: 100px;background-color:#dddddd"></div>
            </div>
            <div style="clear: both;"></div>
        </div>
    </div>

    <div style="background-color: red;">
        <div style="width: 980px;margin: 0 auto;">
            sdfsdfs
        </div>
    </div>

    <div style="width: 300px;border: 1px solid red;"> 
        <div style="width: 96px;height: 30px;border: 1px solid green; float: left;"></div> 
        <div style="width: 96px;height: 30px;border: 1px solid green; float: left;"></div> 
        <div style="width: 96px;height: 30px;border: 1px solid green; float: left;"></div> 
        <div style="width: 96px;height: 30px;border: 1px solid green; float: left;"></div> 
        <div style="width: 96px;height: 30px;border: 1px solid green; float: left;"></div>
        <div style="width: 96px;height: 30px;border: 1px solid green; float: left;"></div>
        <div style="clear: both;"></div>

    </div>
</body>

10.display样式，块级标签和内联标签的转换

<body>
    <div style="background-color: red;display: inline;">asd</div>   #变为内联标签
    <spanstyle="background-color: red;display:block;">dsf</span>     #变为块级标签
</body>

内联标签：无法设置高度，宽度，padding margin

块级标签：可以设置

display: inline-block # 兼具内联标签和块级标签的特性

<body>
    <span style="display:inline-block;background-color: red;height: 50px;width: 70px"></span>
    <a style="background-color: red;">sfds</a>
</body>

display: none; # 让标签消失

11.padding(内边距) ,margin(外边距)

12.css重用

<style>
    .c{共有}
    .c1{独有}
    .c2{独有}
</style>
<div class='c c1'></div>
<div class='c c2'></div>

13.position

<body>
    <div style="width:50px;height: 50px;background-color: black;color:white;
        position: fixed;    # 固定于页面的某一位置
        bottom: 20px;　　
        right: 20px;">返回顶部</div>
    <div style="height: 5000px;background-color:#dddddd;">
    </div>
</body>

菜单永远在顶部

position:fixed

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
              height:48px;
              background-color: black;
              color: #dddddd;
              position: fixed;
              top: 0;
              right: 0;
              left: 0;
         }
        .pg-body{
              height:5000px;
              background-color: #dddddd;
              margin-top: 50px;
         }
    </style>
</head>
<body>
    <div class="pg-header">头部</div>     
    <div class="pg-body">内容</div>
</body>

position:absolute+relative 相对于父级标签的位置放置

<body>
    <div style="width: 500px;height: 200px;position: relative;border: 1px solid red;margin:0 auto;">
        <div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color:black;"></div>
    </div>
    <div style="width: 500px;height: 200px;position: relative;border: 1px solid red;margin:0 auto;">
        <div style="position: absolute;right: 0;bottom: 0;width: 50px;height: 50px;background-color:black;"></div>
    </div>
    <div style="width: 500px;height: 200px;position: relative;border: 1px solid red;margin:0 auto;">
        <div style="position: absolute;right: 0;top: 0;width: 50px;height: 50px;background-color:black;"></div>
    </div> 
</body>

三层，z-index(层级顺序)

<body>
    <div style="display:none;z-index: 10;position: fixed;top: 50%;left: 50%;margin-left: -250px;margin-top:-200px;background-color: white;height: 400px; width: 500px;">
        <input type="text" />
    </div>
    <div style="display:none;z-index: 9;position: fixed;background-color: black;
         top: 0;
         bottom: 0
         left:  0;
         right: 0;
         opacity: 0.5;
    "></div>
    <div style="height:5000px;bakground-color: green;">
         dsfsfs
    </div>
</body>

14.overflow(超过范围就隐藏,或出现滚动条) overflow:hidden overflow:auto

<body>
    <div style="height: 200px;width: 300px;overflow: auto">
        <img src="1.jpg">
    </div>
</body>

15.hover

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            height:48px;
            background-color: #2459a2;
            line-height: 48px;
         }
        .pg-body{
            margin-top: 50px;

         }
         .w{
            width: 980px;
            margin: 0 auto;
         }
         .pg-header .menu{
            display:  inline-block;
            padding: 0 10px;
            color: white;
         }
         .pg-header .menu:hover{
            background-color: blue;
         }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
        </div>
    </div>     
    <div class="pg-body">
        <div class="w">a</div>
    </div>
</body>

16.background-image:url('image/4.gif') # 默认div大的话，图片会重复放

background-repeat: repeat-y;

background-postion: 10px 10px;

<body>
    <div style="height: 35px;width: 400px;position; relative;">
        <input type="text" style="height: 35px;width: 370px;padding-right: 30px;"/>
        <span style="position:absolute;right: 0;top: 10px;background-image: url(i_name.jpg);height:16px;width:16px;display:inline-block;"></span>
    </div>
</body>

页面布局：

主站布局

<div class='pg-header'>
    <div style='width: 980px;margin 0; atuo;'>
        内容自动居中
    </div>
</div>
<div class='pg-content'></div>
<div class='pg-footer'></div>

View Code

后台管理布局

a.左侧菜单跟随滚动条
b.左侧以及上下不动  ********

<head>
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .pg-header{
            height:48px;
            background-color: #2459a2;
            color: white;
            line-height: 48px;
        }
        .pg-header .logo{
            width: 200px;
            background-color: cadetblue;
            text-align: center;
        }
        .pg-header .user{
            width: 160px;
            background-color: wheat;
            color: white;
            height: 48px;
        }
        .pg-header .user:hover{
            background-color: blue;
        }
        .pg-header .user .a img{
            height: 40px; 
            width: 40px;
            margin-top: 4px;
            border-radius:50%;
        }
        .pg-header .user .b{
            z-index:20;
            position: absolute;
            top: 48px; 
            right: 44px;
            background-color:red;
            width: 160px;
            display: none;
        }
        .pg-header .user .b a{
            display: block;
        }
        .pg-content .menu{
            position: fixed;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #dddddd;
        }
        .pg-content .content{
            position: fixed;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background-color: purple;
            overflow: auto;    自动出现滚动条
            z-index: 9;
        }
    </style>
</head>
<body>
    <div class='pg-header'>
        <div class="logo left">
            LOGO
        </div>
        <div class="user right" style="position: relative;">
            <a class="a" href="#">
                <img src="22.jpg">
            </a>
            <div class="b">
                <a>资料</a>
                <a>注销</a>
            </div>
        </div>
    </div>
    <div class='pg-content'>
        <div class="menu left">
            
        </div>
        <div class="content left">
        
        </div>
    </div>
    <div class='pg-footer'></div>
</body>

-------------------------------------------------
position:
    fixed:永远固定在窗口的某个位置
    relative:单独无意义
    absolute:第一次定位，可以在指定位置，滚动滚轮时，不在了

View Code

Javascript

1.注释

单行注释：//

多行注释：/* */

2.变量

name = 'hello' #全局变量

var name = 'tom' # 局部变量

3.数据类型

age = "18";     # 字符串

i = parseInt(age);    # 整型

字符串

a = 'hello tom'
a.charAt(1)   # e
a.charAt(0)   # h
a.substring(1,3)   # "el"
a.length    # 9

实例:

<script>
    function f1(){
        console.log(1);
    }
    //创建定时器
    setInterval("f1()",2000);   # 执行的代码，间隔时间
</script>

<body>
    <div id="i1">欢迎XXX莅临指导</div>
    <script>
        function func(){
         //根据ID获取指定标签的内容
          var tag = document.getElementById('i1');
         //获取标签内部的内容
          var content = tag.innerText;
          var f = content.charAt(0);
          var l = content.substring(l,content.length);
          var new_content = l + f;
          tag.innerText = new_content; 
}
setInterval('func()',1000);
    </script>
</body>

a = 'hellotom'
a.concat(‘jerry’)   #hellotomjerry
a.indexOf('e')      #1
a = 'alexalex'
a.split('e')    # ["al","xal","x"]
a.split('e',1)   # ["al"]

5.数组

a = [11,22,33,44]
a.length   # 4
a.splice(1,1,99)     # 起始位置，删除几个，插入的数据
a      # [11,99,33,44]
a.splice(1,0,909)
a      # [11,909,99,33,44]
a.splice(1,1)
a      # [11,99,33,44]
a.slice(1,3)    # [99,33]

6.对象

7.for循环

//循环时，循环的元素是索引

a = [11,22,33,44]
for(var item in a){
    console.log(item);
}

a = {'k1':'v1','k2':'v2'}
for(var item in a){
    console.log(item);
}

a = [11,22,33,44]

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

不支持字典

while循环

while(条件){ }

8.条件语句

if(条件){

}else if(条件){

}else{

}

if(1==1){}
if(1!=1){}
if(1===1){}

if(1！==1){}
if(1==1 && 2==2){}
if(1==1 || 2==2){}

1 == "1"  # true ,值相等即可
1 === "1"   # false，值和类型都要相等

switch(name){
    case '1':
        console.log(123);
        break;
    case '2':
        console.log(456);
        break;
    case '3':
        console.log('999');
        break;
}

9.函数

function func(arg){
    return arg+1
}
var result = func(1)
console.log(result);

普通函数

function func(){

}

匿名函数

setInterval(function(){
    console.log(123);
},5000)

自执行函数：创建函数并且自动执行

(function(){

console.log(arg);

})(1)

10.序列化

JSON.stringify()把数组转化为字符串

> li = [11,22,33,4,5]

> s = JSON.stringify(li)

< "[11,22,33,4,5]"

JSON.parse()把上面的字符串再转化为数组

> newLi = JSON.parse(s) # 更常用

> newLi

< [11,22,33,4,5]

11.转义

> url = "https://www.sogou.com/web?query=理解";

< "https://www.sogou.com/web?query=理解"

> encodeURI(url)

< "https://www.sogou.com/web?query=%E7%90%86%E8%A7%A3"

> newUrl = encodeURI(url);

< "https://www.sogou.com/web?query=%E7%90%86%E8%A7%A3"

> decodeURI( newUrl)

< "https://www.sogou.com/web?query=理解"

=====================================================

> url

< "https://www.sogou.com/web?query=理解"

> newUrl = encodeURIComponent(url)

< "https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E7%90%86%E8%A7%A3"

客户端请求服务器端，服务器端把数据经过转义保存到客户端的cookie中

12.eval

13.时间

Date对象

> var d = new Date()

> d.getMinutes()

< 41

> n = d.getMinutes + 4

< 45

> d.setMinutes(n)

< 1479541546307

> d

< Sat Nov 19 2016 15:01:01 GMT+0800 (中国标准时间)

14.作用域

先看python的，python是以函数作为作用域

情况一：

def func():

if 1==1:

name = 'tom'

print(name) #成功

情况二：

def func():

if 1==1:

name = 'tom'

print(name)

func()

print(name) # 报错

1.Javascript是以函数作为作用域

function func(){

if(1==1){

var name = 'tom';

}

console.log(name);

}

func() # tom 正常执行

2.函数的作用域在函数未被调用之前就已经创建

function func(){

if(1==1){

var name = 'tom';

}

console.log(name);

}

3.函数的作用域存在作用域链，并且也是在被调用之前创建

xo = 'tom'

function func(){

var xo = 'eric';

function inner(){

var xo = 'tony';

console.log(xo);

}

inner()

}

func() # tony

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

xo = 'tom'

function func(){

var xo = 'eric';

function inner(){

console.log(xo);

}

return inner

}

var ret = func()

ret() # 相当于inner(), 'eric'

DOM

1.找标签

获取单个元素 document.getElementById('i1')

获取多个元素（数组） document.getElementsByTagName('div')

获取多个元素（数组） document.getElementsByClassName('c1')

2.操作标签

a.获取标签中的文本内容

标签.innerText

对标签内部文本进行重新赋值

标签.innerText = " "

b. className

> tag
< <div id="i1">c2</div>
> tag.className = 'c1';         # 整体做操作
< "c1"
> tag
< <div id="i1" class="c1">c2</div>
> tag.className = 'c2';
< "c2"
> tag
< <div id="i1" class="c2">c2</div>
> tag.classList
< ["c2"]
> tag.classList.add('c3')       # 添加指定样式
< 
> tag
< <div id="i1" class="c2 c3">c2</div>
> tag.classList.remove('c2')    # 删除指定样式
< 
> tag
< <div id="i1" class="c3">c2</div>

3.直接选择器

<body>
    <div id="i1">我是i1</div>
    <a>asd</a>
    <a>909</a>
    <a>sdfdfd</a>
</body>

-----------------------
> document.getElementById('i1')  
< <div id="i1">我是i1</div>
> document.getElementById('i1').innerText
< "我是i1"
> document.getElementById('i1').innerText = "新内容"
< “新内容”
> document.getElementsByTagName('a')
< [<a>asd</a>,<a>909</a>,<a>sdfdfd</a>]
> document.getElementsByTagName('a')[1]
< 909
> document.getElementsByTagName('a')[1].innerText = 666
< 666
> tags = document.getElementsByTagName('a')
< [<a>asd</a>,<a>909</a>,<a>sdfdfd</a>]
> for(var i=0;i<tags.length;i++){tags[i].innerText=777;}
< 777    # 改变所有值

4.间接选择器

tag = document.getElementById('i1')

parentElement                   //父节点标签元素
children                        //所有子标签
firstElementChild               //第一个子标签元素
lastElementChild                //最后一个子标签元素
nextElementSibling              //下一个兄弟标签元素
previousElementSibling          //上一个兄弟标签元素

<div onclick='func();'>点我</div>

<script>

    function func(){

}

</script>

6.模态对话框

checkbox

获取值

checkbox对象.checked

设置值

checkbox对象.checked = true

<head>
    <style>
        .hide{
            display: none;
         }
        .c1{
            position:fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.5;
            z-index: 9;
         }
        .c2{
            width: 500px;                                                              
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
            }
    </style>
</head>
<body style="margin: 0;">
    <div>
        <input type="bbutton" value="添加" onclick="ShowModel();"/>
        <input type="bbutton" value="全选" onclick="ChooseAll();"/>
        <input type="bbutton" value="取消" onclick="CancleAll();"/>
        <input type="bbutton" value="反选" onclick="ReverseAll();"/>
        
        <table>
            <thead>
                <tr>
                    <th>选择</th> 
                    <th>主机名</th>  
                    <th>端口</th>  
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.1</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td><input type="checkbox" id="test" /></td>
                    <td>1.1.1.2</td>
                    <td>192</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.3</td>
                    <td>193</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!--遮罩层开始-->
    <div id="i1" class="c1 hide"></div>
    <!--遮罩层结束-->
    <!--弹出框开始-->
    <div id="i2" class="c2 hide">
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <p>
              <input type="button" value="取消" onclick="HideModel();" />
              <input type="button" value="确定" />
        </p>
    </div>
    <!--弹出框结束-->
    <script>
        function ShowModel(){
               document.getElementById('i1').classList.remove('hide');
               document.getElementById('i2').classList.remove('hide');
        }
    </script>
        function HideModel(){
               document.getElementById('i1').classList.add('hide');
               document.getElementById('i2').classList.add('hide');
        }
        function ChooseAll(){
               var tbody = document.getElementById("tb");
               //获取所有的tr
               var tr_list = tbody.children;
               for(var i=0;i<tr_list.length;i++){
                   //循环所有的tr
                   var current_tr=tr_list[i];
                   var checkbox = current_tr.children[0].children[0];
                   checkbox.checked = true;
               }
        function CancleAll(){
               var tbody = document.getElementById("tb");
               //获取所有的tr
               var tr_list = tbody.children;
               for(var i=0;i<tr_list.length;i++){
                   //循环所有的tr
                   var current_tr=tr_list[i];
                   var checkbox = current_tr.children[0].children[0];
                   checkbox.checked = false;
               }
        function ReverseAll(){
               var tbody = document.getElementById("tb");
               //获取所有的tr
               var tr_list = tbody.children;
               for(var i=0;i<tr_list.length;i++){
                   //循环所有的tr
                   var current_tr=tr_list[i];
                   var checkbox = current_tr.children[0].children[0];

                   if(checkbox.checked){
                       checkbox.checked = false;
                   }else{
                          checkbox.checked = true;
                   }
               }
        }

</body>

View Code

<head>
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .item .header{
            height:35px;
            background-color: #2459a2;
            color: white;
            line-height: 35px;
        }
    </style>
</head>
<body>
    <div style="height: 48px;"></div>
    <div style="width: 300px;">
        <div class="item">
            <div id="i1" class="header" onclick="ChangeMenu('i1');">菜单1</div>
            <div class="content">
                <div>内容1</div>
                <div>内容1</div>
                <div>内容1</div>
            </div>
        </div>
        <div class="item">
            <div id="i2" class="header onclick="ChangeMenu('i2');">菜单2</div>
            <div class="content hide">
                <div>内容2</div>
                <div>内容2</div>
                <div>内容2</div>
            </div>
        </div>
        <div class="item">
            <div id="i3" class="header onclick="ChangeMenu('i3');">菜单3</div>
            <div class="content hide">
                <div>内容3</div>
                <div>内容3</div>
                <div>内容3</div>
            </div>
        </div>
        <div class="item">
            <div id="i4" class="header onclick="ChangeMenu('i4');">菜单4</div>
            <div class="content hide">
                <div>内容4</div>
                <div>内容4</div>
                <div>内容4</div>
            </div>
        </div>
    </div>
    <script>
        function ChangeMenu(nid){
             var current_header = document.getElementById(nid);
             var item_list = current_header.parentElement.parentElement.children;
             for(var i=0;i<item_list.length;i++){
                var current_item = item_list[i];
                current_item.children[1].classList.add('hide');
             } 
             current_header.nextElementSibling.classList.remove('hide');
        }
    </script>
</body>

View Code

JQuery

posted @ 2017-07-25 11:59 -Ryan- 阅读(276) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Ryan

HTML,CSS,Javascript,JQuery

公告