JavaScript连载37-切换选项卡样式以及搭建一个评论系统

当前位置:

首页 > temp > JavaScript教程 >

JavaScript连载37-切换选项卡样式以及搭建一个评论系统

一、选项卡

使用函数来动态的显示标签的样式，也可以使用html自带的动画效果来实现下面的操作

<!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>规则</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.获取标签
            var allLists = $("tab_header").getElementsByTagName("li");
            var allDom = $("tab_content").getElementsByClassName("dom");
            //2.遍历监听
            for(var i=0;i<allLists.length;i++){
                var li= allLists[i];
                (function (i) {
                    li.onmouserover = function (ev2) {
                        //这里复习了鼠标悬浮在某一块
                        //清除同级别的选中样式类
                        for(var j=0;j<allLists.length;j++){
                            allLists[j].className='';
                            allDom[j].style.display = "none";
                        }
                        //设置当前的li标签选中的样式
                        li.className = "selected";//一定注意使用className
                        allDom[i].style.display = "block";
                    }
                })(i)
            }
        }
        function $(id) {
            return typeof id == 'string' ? document.getElementById(id) : null;
        }
    </script>
</body>
</html>

二、构建评论区

我们先构建一个评论区的框架，当我们点击发表的时候，就会在ul标签中新增一个li标签，然后li标签里面的内容就是评论内容，至于具体实现逻辑我们下次再写。

<!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>发表评论：</label>
            <textarea id="my_textarea" cols="60" rows="10"></textarea>
            <button id="btn">发表</button>
        </div>
        <ul id="ul">
            <!--我们点击发表按钮，这里面就会多一个li标签，就是用来放评论的-->

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

三、源码：

D37_1_OptionCard.html
D37_2_Review.html
地址:https://github.com/ruigege66/JavaScript/blob/master/D37_1_OptionCard.html
https://github.com/ruigege66/JavaScript/blob/master/D37_2_Review.html
博客园：https://www.cnblogs.com/ruigege0000/
CSDN：https://blog.csdn.net/weixin_44630050?t=1

出处：https://www.cnblogs.com/ruigege0000/p/13812405.html

栏目列表