<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签栏切换效果</title>
<style>
.tab-box,
.tab-body,
.tab-body-div,
.tab-head-div {
float: left;
}
.tab-box {
width: 384px;
height: 100px;
margin: 100px auto;
border: 1px #ccc solid;
}
.tab-head-div {
width: 95px;
height: 30px;
background-color: #206f96;
line-height: 30px;
text-align: center;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.tab-head .current {
background-color: #ccc;
}
.tab-body-div {
margin: 20px;
}
.tab-body .tab-body-div {
display: none;
}
.tab-body .current {
display: block;
}
</style>
</head>
<body>
<!-- 创建容器 -->
<div class="tab-box">
<div class="tab-head">
<div class="tab-head-div current">标签一</div>
<div class="tab-head-div">标签二</div>
<div class="tab-head-div">标签三</div>
<div class="tab-head-div tab-head-r">标签四</div>
</div>
<div class="tab-body">
<div class="tab-body-div current"> 1 </div>
<div class="tab-body-div"> 2 </div>
<div class="tab-body-div"> 3 </div>
<div class="tab-body-div"> 4 </div>
</div>
</div>
<script>
//先获取所有标签的属性集合
var tabs = document.getElementsByClassName('tab-head-div');
var divs = document.getElementsByClassName('tab-body-div');
//先遍历head类集
for (var i = 0; i < tabs.length; ++i) {
tabs[i].onmouseover = function () {//做每次的鼠标移入函数(为标签元素对象添加鼠标滑过事件)
for (var i = 0; i < tabs.length; ++i) {//为每次的鼠标移入做不同的类的变化
if (tabs[i] == this) {//显示当前鼠标滑过的标签
tabs[i].classList.add('current');
divs[i].classList.add('current');
}
else {
tabs[i].classList.remove('current');
divs[i].classList.remove('current');
}
}
}
}
</script>
</body>
</html>
body{
background:#ddd;
text-align:center
}
.list{
display:inline-block;
margin-top:20px;
padding:40px;
border-radius:8px;
background:#fff;
color:#333;
text-align:left;
font-size:13px
}
.list-ul{
list-style:none;
margin:0;
padding:0
}
.list-option{
padding:6px 0
}
.list-input{
width:300px;
border:1px solid #ccc;
padding:4px;font-size:14px;
color:#333
}
.list-input:hover{
background:#effaff
}
.list-btn span{
color:#0065a0;cursor:pointer
}
.list-btn span:hover{
text-decoration:underline
}
.list-btn b{
text-align:center;
background-color:#d6edff;
border-radius:6px;
width:20px;
height:20px;
display:inline-block;
margin:0 2px;
cursor:pointer;
color:#238fce;
border:1px solid #b3dbf8;
}
.list-bottom{
margin-top:5px
}
.list-add-show{
color:#f60;
cursor:pointer
}
.list-add-show:before{
position:relative;
top:1px;
margin-right:5px;
content:"+";
font-weight:700px;
font-size:16px;
font-family:arial
}
.list-add-show span:hover{
text-decoration:underline
}
.list-add-area{
margin-top:5px
}
.list-add-add{
cursor:pointer;
margin-left:5px
}
.list-add-cancel{
cursor:pointer;
margin-left:4px
}
.list-add-input{
width:180px;
border:1px solid #ccc;
padding:4px;
font-size:14px;
color:#333
}
.list-add-input:hover{
background:#effaff
}
.list-tmp{
display:none
}
.list-hide{
display:none
}
.list-ul{
display:none
}
document.getElementById('add').onclick = function(){
document.getElementById('listHide').style.display="block";
};
document.getElementById('listAddCancel').onclick = function(){
document.getElementById('listHide').style.display="none";
};
document.getElementById('listAdd').οnclick= function(){
var listUl=document.getElementsByClassName('list-ul')[0];
// 克隆节点
var listUl2=listUl.cloneNode(true);
listUl2.style.display='block';
listUl2.getElementsByClassName('list-input')[0].value=document.getElementById('listAddInput').value;
var listBottom=document.getElementById('listBottom');
if(listUl2.getElementsByClassName('list-input')[0].value===""){
alert("文本框不能为空!");
}
else{
document.getElementById('list').insertBefore(listUl2,listBottom);
document.getElementById('listAddInput').value=null;
}
// 上移功能
listUl2.getElementsByClassName('list-up')[0].οnclick=function(){
var pre=listUl2.previousElementSibling;
if(listUl.isEqualNode(pre)){
alert('这已经是第一行!');
}
else{
pre.parentElement.insertBefore(listUl2,pre);
}
}
// 下移功能
listUl2.getElementsByClassName('list-down')[0].οnclick=function(){
var next =listUl2.nextElementSibling;
if(listBottom.isEqualNode(next)){
alert('这已经是第最后一行!');
}
else{
next.parentElement.insertBefore(listUl2,listBottom);
}
}
//删除功能
listUl2.getElementsByClassName('list-del')[0].οnclick=function(){
var conf=confirm("是否删除这条评论!!!");
if(conf){
listUl2.parentNode.removeChild(listUl2);
}
}
}