JavaScript連載37-切換選項卡樣式以及搭建一個評論系統(tǒng)

Coder編程 2021-09-12

展開全文

一、選項卡

使用函數(shù)來動態(tài)的顯示標(biāo)簽的樣式，也可以使用html自帶的動畫效果來實現(xiàn)下面的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D37_1_OptionCard</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        a{
            text-decoration:none;
            color:#000000;
        }
        #tab{
            width:498px;
            height:120px;
            border:1px solid #ccc;
            margin:100px auto;
        }
        #tab_header{
            background-color: #e8e8e8;
            padding:0 1px;
            border-bottom:1px solid #cccccc;
            cursor:pointer;
        }
        #tab_header ul li.selected{
            background-color:#fff;
            border-bottom:none;

            /*左右線條*/
            border-left:1px solid #ccc;
            border-right:1px solid #ccc;

            padding:0;
        }
        #tab_header ul li:nth-child(1){
            border-left:none;
        }

    </style>
</head>
<body>
    <div id="tab">
        <!--頭部-->
        <div id="tab_header">
            <ul>
                <li class="selected">公告</li>
                <li>規(guī)則</li>
                <li>論壇</li>
                <li>安全</li>
                <li>公益</li>
            </ul>
        </div>
        <div id="tab_content">
            <ul>
                <li class="dom">我是第一個顯示的</li>
                <li class="dom">我是第二個顯示的</li>
                <li class="dom">我是第三個顯示的</li>
                <li class="dom">我是第四個顯示的</li>
                <li class="dom">我是第五個顯示的</li>
            </ul>
        </div>
    </div>
    <script>
        window.onload=function (ev) {
            //1.獲取標(biāo)簽
            var allLists = $("tab_header").getElementsByTagName("li");
            var allDom = $("tab_content").getElementsByClassName("dom");
            //2.遍歷監(jiān)聽
            for(var i=0;i<allLists.length;i++){
                var li= allLists[i];
                (function (i) {
                    li.onmouserover = function (ev2) {
                        //這里復(fù)習(xí)了鼠標(biāo)懸浮在某一塊
                        //清除同級別的選中樣式類
                        for(var j=0;j<allLists.length;j++){
                            allLists[j].className='';
                            allDom[j].style.display = "none";
                        }
                        //設(shè)置當(dāng)前的li標(biāo)簽選中的樣式
                        li.className = "selected";//一定注意使用className
                        allDom[i].style.display = "block";
                    }
                })(i)
            }
        }
        function $(id) {
            return typeof id == 'string' ? document.getElementById(id) : null;
        }
    </script>
</body>
</html>

37.1

二、構(gòu)建評論區(qū)

我們先構(gòu)建一個評論區(qū)的框架，當(dāng)我們點擊發(fā)表的時候，就會在ul標(biāo)簽中新增一個li標(biāo)簽，然后li標(biāo)簽里面的內(nèi)容就是評論內(nèi)容，至于具體實現(xiàn)邏輯我們下次再寫。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D37_2_Review</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        #box{
            width:800px;
            border:1px solid #ccc;
            margin:100px auto;
            padding:20px;
        }
        #my_textarea{
            width:80%;
            height:120px;
        }
        .box-top{
            margin-bottom:20px;
        }
        #ul{
            margin:0 80px;
        }
        #ul li{
            border-bottom:1px dashed #ccc;
            color:red;
            line-height:44px;
        }
        #ul li a{
            float:right;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="box-top">
            <label>發(fā)表評論：</label>
            <textarea id="my_textarea" cols="60" rows="10"></textarea>
            <button id="btn">發(fā)表</button>
        </div>
        <ul id="ul">
            <!--我們點擊發(fā)表按鈕，這里面就會多一個li標(biāo)簽，就是用來放評論的-->

        </ul>
    </div>
</body>
</html>