Switching pages
HTML
<div class="gonggao" id="di2">
<div class="ggtb" id="op2">
<ul class="xinwen">
<li class="zhe">综合</li>
<li class="zhe">公告</li>
<li class="zhe">赛事</li>
<li class="zhe">攻略</li>
<li class="zhe">社区</li>
</ul>
</div>
<div class="nlong">
<ul class="dema" id="a1">
<li class="made">
<a href="" class="xiya"> Demacian Cup quarterfinals released a list of </a>
</li>
<li class="xiamian ">
<span class="qita">其他</span>
<a href="" class="shouhu"> "guardian" angel of Kalmar charitable community projects dawn skin </a>
<span class="weibu">12-13</span>
</li>
<li class="xiamian">
<span class="qita">视频</span>
<a href="" class="shouhu"> Efei Achilles Heroes: the strongest weapon is faith </a>
<span class="weibu">12-12</span>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu"> 9.24 version update announcement: Efei Achilles shocking debut </a>
<span class="weibu">12-11</span>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu"> 9.24 Yi Genting update: new career system soul Genting added </a>
<span class="weibu">12-11</span>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu"> canyon top of the fifth season award announcement </a>
<span class="weibu">12-11</span>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu"> night and dawn: the choice of the moment coming </a>!
<span class="weibu">12-11</span>
</li>
</ul>
<ul class="dema" id="a2">
<li class="made">
<a href="" class="xiya"> December 24 Demacian, forgive Rama large area network environment, upgrade and maintenance announcement </a>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a list class="shouhu"> game environment publicity and punishment href="" December 20 </a>
<span class="weibu">12-20</span>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu"> December 20 free Heroes Update Bulletin </a>
<span class="weibu">12-18</span>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu"> Mall fault on the first announcement processed abnormal account </a>
<span class="weibu">12-17</span>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu"> Mall abnormal fluctuations on the follow-up announcement processed </a>
<span class="weibu">12-14</span>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu"> abnormal fluctuations on the mall deal announcement </a>
<span class="weibu">12-13</span>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu"> 9.24 version update announcement: Efei Achilles shocking debut </a>
<span class="weibu">12-11</span>
</li>
</ul>
<ul class="dema" id="a3">
<li class="made">
<a href="" class="xiya"> December 24 Demacian, forgive Rama large area network environment, upgrade and maintenance announcement </a>
</li>
<li class="xiamian">
<span class="qita">新闻</span>
<a href="" class="shouhu"> December 26th German Cup knockout quarterfinals open </a>
<span class="weibu">12-24</span>
</li>
<li class="xiamian">
<span class="qita">视频</span>
<a href="" class="shouhu"> "hero Mike crazy": Ming-kai coach Sao buddy </a>
<span class="weibu">12-23</span>
</li>
<li class="xiamian">
<span class="qita">视频</span>
<a href="" class="shouhu"> players fly time: an interview with the German Cup joy collection </a>
<span class="weibu">12-23</span>
</li>
<li class="xiamian">
<span class="qita">赛事</span>
<a href="" class="shouhu"> the successful conclusion of the group stage debut Come night super god Kali </a>
<span class="weibu">12-23</span>
</li>
<li class="xiamian">
<span class="qita">视频</span>
<a href="" class="shouhu"> "hero Mike crazy": Brothers Hurricane surface acting </a>
<span class="weibu">12-22</span>
</li>
<li class="xiamian">
<span class="qita">视频</span>
<a href="" class="shouhu"> TOP5: Yogurt Qi Yana deadly raid overwhelming </a>
<span class="weibu">12-22</span>
</li>
</ul>
<ul class="dema" id="a4">
<li class="made">
<a href="" class="xiya"> Ramen bears evolved into a key Shadowless Sword Genting artillery output device </a>
</li>
<li class="xiamian">
<span class="qita">教学</span>
<a href="" class="shouhu"> Genting version 4 big magic of God ascent rate double the rate of the first four high </a>
<span class="weibu">12-22</span>
</li>
<li class="xiamian">
<span class="qita">教学</span>
<a href="" class="shouhu"> Tucci ADC regain the glory of the hero version Rd strong recommendation </a>
<span class="weibu">12-21</span>
</li>
<li class="xiamian">
<span class="qita">教学</span>
<a href="" class="shouhu"> Genting new law restructuring the sea king then the flow of control bomb stone people </a>
<span class="weibu">12-21</span>
</li>
<li class="xiamian">
<span class="qita">教学</span>
<a href="" class="shouhu"> nightmare become gold medal C 9.24 card fee Genting 3 rating </a>
<span class="weibu">12-19</span>
</li>
<li class="xiamian">
<span class="qita">教学</span>
<a href="" class="shouhu"> assassin Aoun comes with three electric knife stab of Genting Thunder defensive to the offensive </a>
<span class="weibu">12-19</span>
</li>
<li class="xiamian">
<span class="qita">教学</span>
<a href="" class="shouhu"> 9.24 six mad Thunder robbery explosion AOE moment away the opponent </a>
<span class="weibu">12-18</span>
</li>
</ul>
<ul class="dema" id="a5">
<li class="made">
<a href="" class="xiya"> comic: skin meager Orne Christmas it! </a>
</li>
<li class="xiamian">
<span class="qita">娱乐</span>
<a href="" class="shouhu"> G2 owners and Perkz dating: A P hairline worrying! </a>
<span class="weibu">12-23</span>
</li>
<li class="xiamian">
<span class="qita">娱乐</span>
<a href="" class="shouhu"> Caps interview: looking forward to 2020 and Forg1ven fight </a>
<span class="weibu">12-23</span>
</li>
<li class="xiamian">
<span class="qita">娱乐</span>
<a href="" class="shouhu"> promotion Daddy! FNC exploits auxiliary YellowStaR before drying out their baby </a>
<span class="weibu">12-23</span>
</li>
<li class="xiamian">
<span class="qita">娱乐</span>
<a href="" class="shouhu"> VG official kkOma wish a happy birthday: look kkOma led the team to take off! </a>
<span class="weibu">12-23</span>
</li>
<li class="xiamian">
<span class="qita">新闻</span>
<a href="" class="shouhu"> Tiger bashing interview with VG double C-iBoy: I do not want to come across EDG! Fear them off the hook </a>
<span class="weibu">12-22</span>
</li>
<li class="xiamian">
<span class="qita">新闻</span>
<a href="" class="shouhu"> players Birthday Book: Good single player on FPX Khan Happy Birthday! </a>
<span class="weibu">12-22</span>
</li>
</ul>
<a href="" class="zuidi">
<Span class = "n1"> Read more </ span>
<Span class = "n2"> News </ span>
</a>
</div>
css
.gonggao {
width: 496px;
height: 380px;
overflow: hidden;
float: right;
}
.gonggao .ggtb {
width: 496px;
height: 35px;
overflow: visible;
box-sizing: border-box;
border-bottom: 1px #e0e2e2 solid;
}
.ggtb{
width: 100%;
height: 35px;
overflow: visible;
position: relative;
}
.gonggao .xinwen {
width: 596px;
height: 35px;
left: 0px;
}
.xinwen {
position: absolute;
height: 35px;
left: 128px;
box-sizing: border-box;
border-bottom: 1px #e0e2e2 solid;
cursor: pointer;
}
.xinwen> li: hover {
font-weight: 700;
color: # 1da6ba;
}
.xinwen> li {
list-style: none;
position: relative;
cursor: pointer;
float: left;
width: auto;
min-width: 40px;
height: 37px;
overflow: visible;
color: #676767;
font-size: 16px;
letter-spacing: 1px;
line-height: 35px;
text-align: center;
}
.gonggao .xinwen> li {
font-size: 18px;
line-height: 24px;
margin-right: 74px;
}
.nlong {
width: 496px;
height: 345px;
}
{grade
width: 496px;
height: 305px;
position: relative;
}
.xiya {
color: #0da0b4;
}
.dema>.made{
list-style: none;
background-position: 0 -458px;
width: 496px;
height: 59px;
overflow: hidden;
line-height: 59px;
text-align: center;
font-size: 22px;
font-weight: 700;
box-sizing: border-box;
padding: 0 12px;
text-overflow: ellipsis;
white-space: nowrap;
color: #0da0b4;
}
js
document.getElementsByClassName('zhe')[0].onclick = function () {
document.getElementById('a1').style.display = 'block';
document.getElementById('a2').style.display = 'none';
document.getElementById('a3').style.display = 'none';
document.getElementById('a4').style.display = 'none';
document.getElementById('a5').style.display = 'none';
}
document.getElementsByClassName('zhe')[1].onclick = function () {
document.getElementById('a1').style.display = 'none';
document.getElementById('a2').style.display = 'block';
document.getElementById('a3').style.display = 'none';
document.getElementById('a4').style.display = 'none';
document.getElementById('a5').style.display = 'none';
}
document.getElementsByClassName('zhe')[2].onclick = function () {
document.getElementById('a1').style.display = 'none';
document.getElementById('a2').style.display = 'none';
document.getElementById('a3').style.display = 'block';
document.getElementById('a4').style.display = 'none';
document.getElementById('a5').style.display = 'none';
}
document.getElementsByClassName('zhe')[3].onclick = function () {
document.getElementById('a1').style.display = 'none';
document.getElementById('a2').style.display = 'none';
document.getElementById('a3').style.display = 'none';
document.getElementById('a4').style.display = 'block';
document.getElementById('a5').style.display = 'none';
}
document.getElementsByClassName('zhe')[4].onclick = function () {
document.getElementById('a1').style.display = 'none';
document.getElementById('a2').style.display = 'none';
document.getElementById('a3').style.display = 'none';
document.getElementById('a4').style.display = 'none';
document.getElementById('a5').style.display = 'block';
}