JavaScript serialization 37 – switching tab styles and building a comment system


1、 Tab

  • Use the function to dynamically display the style of the tag, or use the animation effect of HTML to achieve the following operation
html>        D37_ 1_ OptionCard    <br>        *{<br>             margin:0; <br>             padding:0; <br>        }<br>        a{<br>            text-d ecoration:none; <br>            color:#000000;<br>        }<br>        #tab{<br>             width:498px; <br>             height:120px; <br>             border:1px  solid #ccc;<br>             margin:100px  auto;<br>        }<br>        #tab_ header{<br>            background-color: #e8e8e8;<br>             padding:0  1px;<br>            border- bottom:1px  solid #cccccc;<br>             cursor:pointer; <br>        }<br>        #tab_ header ul  li.selected {<br>            background-color:#fff;<br>            border- bottom:none; <br><br>/ * left and right lines * / < br > border- left:1px  solid #ccc;<br>            border- right:1px  solid #ccc;<br><br>             padding:0; <br>        }<br>        #tab_ header ul li:nth-child(1){<br>            border- left:none; <br>< br > < br > announcement rules forum safety public welfare I am the first display. I am the second display. I am the third display. I am the fourth display. I am the fifth display      <br>         window.onload=function (EV) {< br > // 1. Get tags < br > var alllists = $("tab_ header").getElementsByTagName("li");<br>            var allDom = $("tab_ Br > "bydomname;" < br; for content ">< allLists.length ;i++){<br>                var li= allLists[i]; <br>                (function (i) {<br>                     li.onmouserover = function (Ev2) {< br > // here we review the mouse hovering over a block < br > // clearing the selected style class at the same level < br > here          for(var j=0;j< allLists.length ;j++){<br>                            allLists[j].className='';<br>                            allDom[j]. style.display  = "none"; <br>< br > // set the selected style of the current Li tag < br > and li.className "; // be sure to use classname < br > alldom [i] style.display  = "block"; <br>                    }<br>                })(i)<br>            }<br>        }<br>        function $(id) {<br>            return typeof id == 'string' ?  document.getElementById (id) : null;<br>        }<br>

2、 Build comment area

  • We first build a framework for the comment area. When we click publish, we will add a Li tag to the UL tag. Then the content in the Li tag is the comment content. As for the specific implementation logic, we will write it next time.
html>        D37_ 2_ Review    </span><span style="line-height: 26px"><br>        *{<br>             margin:0; <br>             padding:0; <br>            list- style:none; <br>        }<br>        #box{<br>             width:800px; <br>             border:1px  solid #ccc; <br>             margin:100px  auto;<br>             padding:20px; <br>        }<br>        #my_ textarea{<br>             width:80%; <br>             height:120px; <br>        }<br>        .box-top{<br>            margin- bottom:20px; <br>        }<br>        #ul{<br>             margin:0  80px; <br>        }<br>        #ul li{<br>            border- bottom:1px  dashed #ccc;<br>             color:red; <br>            line- height:44px; <br>        }<br>        #ul li a{<br>             float:right; <br>        }<br>    </span><span style="line-height: 26px "> comment: publish

3、 Source code:

  • D37_1_OptionCard.html
  • D37_2_Review.html
  • Address:
  • Blog Garden:
  • CSDN:
  • Welcome to WeChat official account: Fourier transform, personal account, for technical exchange only.