一、选项卡
- 使用函数来动态的显示标签的样式，也可以使用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{
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">
</ul>
</div>
</body>
</html>
37.2
三、源码：
- 地址:
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 - 欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流
