I am a white front-end, but this blog is used to record their own learning process. Insist on learning every day, there is progress. Refuel
Today they are doing tab, we want to achieve background images and colors tab bar with the index value changes, began to think the idea is to achieve a css, hover the mouse up when implementing change the background picture, feel very good, I can not tell what they were thinking about two days ago in the clouds and Netease course, there is now useless. Finally js achieve
Here is the code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>选项卡</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div id="tab"> <!-- 头部 --> <div id="tab_header"> <ul> <li class="selected">公告</li> <li>规则</li> <li>论坛</li> <li>安全</li> <Li</Public>Li> </ul> </div> <!-- 内容部分 --> <div id="tab_content"> <div class="dom" style="display: block;"> <ul> <li><a href="#">少年</a></li> <li><a href="#">吟哦</a></li> <li><a href="#">哈哈哈哈</a></li> <li><a href="#">啊哈哈哈</a></li> </ul> </div> <div class="dom"> <ul> <li><a href="#">少dd年</a></li> <li><a href="#">吟哦</a></li> <li><a href="#">什么啊</a></li> <li><a href="#">啊哈哈哈</a></li> </ul> </div> <div class="dom"> <ul> <li><</week>= "#"the hrefAa></li> <li><a href="#">吟哦</a></li> <li><a href="#">哈哈哈哈</a></li> <li><a href="#">周末</a></li> </ul> </div> <div class="dom"> <ul> <li><a href="#">少年</a></li> <li><a href="#">审核AA</a></li> <li><a href="#">哈哈哈哈</a></li> <li><a href="#">啊哈斤</a></li> </ul> </div> <div class="dom"> <ul> <li><a href="#">少年</a></li> <li><a href="#">吟哦</a></li> <li><a href="#">哈哈哈哈</a></li> <li><a href="#">啊哈哈哈</a></li> </ul> </div> </div> </div> <script src="js/index.js"></script> </body> </html>
JS code is as follows:
<script>
= function the window.onload () {
// Get head li tag
var allLis = $ ( 'tab_header'). the getElementsByTagName ( 'li')
var allDom = $ ( 'tab_content'). getElementsByClassName ( 'DOM')
// iterate listening
for (var I = 0; I <allLis.length; I ++) {
var allLis Li = [I];
// bind index
li.index = I;
// the console.log (Li);
Li = function .onmouseover () {
// thought exclusively
for (K var = 0; K <allLis.length; K ++) {
allLis [K] = .className ""
allDom [K] .style.display = "none"
}
the this = .className "Selected"
allDom [this.index] .style.display = 'Block'
}
}
}
// class name by simply acquiring the package DOM
function $ (ID) {
return typeof ID === "String"? Document. the getElementById (ID): null;
}
</script>
CSS code is as follows: Note that the CSS code, click on the tab at the time, the leftmost and rightmost 1px border to get rid of
*{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: #000;
}
#tab{
width: 498px;
height: 120px;
border: 1px solid #ccc;
cursor: pointer;
margin: 100px auto;
/* overflow: hidden; */
}
#tab_header{
background: #e8e8e8;
height: 28px;
line-height: 28px;
}
#tab_header ul{
width: 500px;
/* display: flex;
justify-content: space-around;
text-align: center; */
}
#tab_header ul li{
float: left;
width: 98px;
/* background: coral; */
text-align: center;
border-bottom: 1px solid #ccc;
padding: 0 1px;
}
#tab_header ul li.selected{
background: #fff;
color:rgb(32, 170, 124);
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;
}
#tab_header ul li:nth-last-child{
border-right:none;
}
#tab_header ul li:hover{
font-weight: 400;
color: red;
font-size: 18px;
}
/ * The content area * /
#tab_content {
}
#tab_content .dom{
padding-top: 20px;
display: none;
}
#tab_content .dom ul{}
#tab_content .dom ul li{
float: left;
width: 220px;
text-align: center;
margin: 5px;
}
#tab_content .dom ul li a:hover{
color: red;
}
FIG effect as
The last day to do the code here
