一、選項(xiàng)卡- 使用函數(shù)來(lái)動(dòng)態(tài)的顯示標(biāo)簽的樣式，也可以使用html自帶的動(dòng)畫效果來(lái)實(shí)現(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">我是第一個(gè)顯示的</li>
<li class="dom">我是第二個(gè)顯示的</li>
<li class="dom">我是第三個(gè)顯示的</li>
<li class="dom">我是第四個(gè)顯示的</li>
<li class="dom">我是第五個(gè)顯示的</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)懸浮在某一塊
//清除同級(jí)別的選中樣式類
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)建評(píng)論區(qū)- 我們先構(gòu)建一個(gè)評(píng)論區(qū)的框架，當(dāng)我們點(diǎn)擊發(fā)表的時(shí)候，就會(huì)在ul標(biāo)簽中新增一個(gè)li標(biāo)簽，然后li標(biāo)簽里面的內(nèi)容就是評(píng)論內(nèi)容，至于具體實(shí)現(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ā)表評(píng)論：</label>
<textarea id="my_textarea" cols="60" rows="10"></textarea>
<button id="btn">發(fā)表</button>
</div>
<ul id="ul">
<!--我們點(diǎn)擊發(fā)表按鈕，這里面就會(huì)多一個(gè)li標(biāo)簽，就是用來(lái)放評(píng)論的-->
</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
|
