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>
37.1

二、构建评论区

  • 我们先构建一个评论区的框架，当我们点击发表的时候，就会在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>
37.2

三、源码：

  • 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
赞 (0)

相关推荐