亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 61
粉絲 0
評論 0
訪問量 73731
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
JS完成的選項卡和在線客服案例
Pengsir
原創(chuàng)
756人瀏覽過

選項卡：

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/index.css">
    <title>選項卡</title>
</head>
<body>
        <h2 class="head">選項卡案例</h2>
        <div class="box1">
            <ul>
                <li class="active"><a href="">技術(shù)文章</a></li>
                <li><a href="">網(wǎng)站源碼</a></li>
                <li><a href="">原生手冊</a></li>
                <li><a href="">推薦博文</a></li>
            </ul>
            <span>
                <a href="">更多下載>></a>
            </span>
        <div class="k">
            <ul>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-1</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-1</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-1</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-1</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-1</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-1</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-1</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-1</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-1</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-1</span></li>
            </ul>
        </div>
            <div>
            <ul>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-2</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-2</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-2</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-2</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-2</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-2</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-2</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-2</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-2</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-2</span></li>
            </ul>
            </div>
            <div>
            <ul>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-3</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-3</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-3</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-3</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-3</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-3</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-3</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-3</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-3</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-3</span></li>
            </ul>
            </div>
            <div>
            <ul>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-4</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-4</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-4</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-4</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-4</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-4</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-4</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-4</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-4</span></li>
                <li><a href="">js 開發(fā)跨平臺界面程序 - CSDN博客</a><span>2018-4-4</span></li>
            </ul>
        </div>
        </div>
        <script>
//            1.獲取選項卡的頁面元素
            var box=document.getElementsByClassName('box1')[0]
            var ul=box.getElementsByTagName('ul')[0]
            var li=ul.getElementsByTagName('li')
            var div=box.getElementsByTagName('div')
//            2.給每個選項卡添加滑動事件
            for(var i=0;i<li.length;i++){
                li[i].index=i

            li[i].onmouseover=function () {
                for(var i=0;i<li.length;i++){
                    li[i].className=''
                    div[i].style.display='none'
                }
                    this.className='active'
                div[this.index].style.display='block'
                }
            }
        </script>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

選項卡css樣式：

實(shí)例

h2{
   text-align: center;
}
.box1{
    width: 540px;
    height: 500px;
    background-color: #efefef;
    color: #363636;
    border: 1px solid #ccc;
    margin: 20px auto;
}
.box1>ul{

    margin: 0;
    padding: 0;
    background-color: white;
    overflow: hidden;
}
.box1 > ul + span{
    float: right;
    width: 90px;
    height: 36px;
    line-height: 36px;
    margin-top: -36px;
}
.box1 > ul +span a{
    color: #696969;
    text-decoration: none;
}
.box1 >ul li{
    list-style-type: none;
    float: left;
    width: 90px;
    height: 33px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center;
    line-height: 36px;
}
.box1 ul li a{
    color: #696969;
    text-decoration: none;
}
.box1 li.active {
    font-weight: bolder;
    background-color: #fff;
    border-bottom: none;
    border-top: 3px solid orangered;
}
.box1 div{
    display: none;
}
.box1 .k{
    display: block;
}
.box1 div ul{
    margin: 10px;
    padding: 10px;
    list-style-type: none;
    /*background-color: orange;*/
}
.box1 div ul li{
    line-height: 2.5em;
}
.box1 div ul li a{
    color: black;
    text-decoration: none;
}
.box1 div ul li a:hover{
    color: #000;
}
.box1 div ul li span{
    float: right;
    color: red;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

在線客服：

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿機(jī)器人聊天</title>
    <style>
        div:nth-child(1){
            width: 450px;
            height: 650px;
            background-color: lightsalmon;
            margin: 30px auto;
            color: #333;
            box-shadow: 2px 2px 2px #808080;
        }
        h2{
            text-align: center;
            margin-bottom: -10px;
        }
        div:nth-child(2){
            width: 400px;
            height: 500px;
            border: 4px double lightgray;
            background-color: white;
            margin: 20px auto 10px;
        }
        ul{
            list-style-type: none;
            line-height: 2em;
            overflow: hidden;
            padding: 15px;
        }
        table{
            width: 90%;
            height: 80px;
            margin: auto;

        }
        textarea{
            resize: none;
            border: none;
            background-color:white;
        }
        button{
            width: 60px;
            height: 40px;
            background-color: lightgreen;
            color: black;
            border: none;
        }
        button:hover{
            cursor: pointer;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <h2>在線客服</h2>
        <div>
            <ul>
                <li></li>
            </ul>
        </div>
    <table>
        <tr>
            <td><textarea name="text"  cols="50" rows="4"></textarea></td>
            <td><button>發(fā)送</button></td>
        </tr>
    </table>
    </div>
    <script>
//        1.獲取頁面中的按鈕，文本域，對話窗口
        var list=document.getElementsByTagName('ul')[0]
        var btn=document.getElementsByTagName('button')[0]
        var text=document.getElementsByName('text')[0]
        var sum=0
        btn.onclick=function () {
            if(text.value.length==0){
                alert('親，你當(dāng)前沒有輸入任何內(nèi)容')
                return false
            }
            //獲取用戶輸入的內(nèi)容
            var useContent=text.value
            //清空內(nèi)容區(qū)
            text.value=''
//            2.創(chuàng)建新節(jié)點(diǎn)
            var li=document.createElement('li')
            var usePic='<img src="img9.jpg" width="60" style="border-radius: 50%">'
            li.innerHTML=usePic+useContent
//            3.插到頁面中
            list.appendChild(li)
             sum +=1
            setTimeout(function () {
                var info=['本店不支持退貨，換貨可以','前面還有很多人，請耐心等待','有事快說，親']
                var tem=info[Math.floor(Math.random()*3)]
                var service =document.createElement('li')
                var sePic='<img src="img7.jpg" width="60" style="border-radius: 50%">'
                service.innerHTML=sePic+'<span style="color:red">'+tem+'<span>'
                list.appendChild(service)
                sum += 1
            },2000)
            if(sum >10){
                list.innerHTML=''
                sum=0
            }
        }

    </script>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

運(yùn)行效果圖：

選項卡案例.png在線客服案例.png

手抄：

IMG_2549.JPGIMG_2550.JPG

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)