teb切换

Posted 2020-11-26 wangzihao147

页面的切换

 

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">德玛西亚杯八强名单出炉</a>
                            </li>
                            <li class="xiamian ">
                                <span class="qita">其他</span>
                                <a href="" class="shouhu">"守护者"公益计划 黎明使者 卡尔玛 慈善皮肤</a>
                                <span class="weibu">12-13</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">视频</span>
                                <a href="" class="shouhu">厄斐琉斯英雄介绍:最强的武器，是信念</a>
                                <span class="weibu">12-12</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">公告</span>
                                <a href="" class="shouhu">9.24版本更新公告：厄斐琉斯震撼登场</a>
                                <span class="weibu">12-11</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">公告</span>
                                <a href="" class="shouhu">9.24云顶之弈更新：新职业系魂加入云顶</a>
                                <span class="weibu">12-11</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">公告</span>
                                <a href="" class="shouhu">峡谷之巅第五赛季奖励公告</a>
                                <span class="weibu">12-11</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">公告</span>
                                <a href="" class="shouhu">黑夜与黎明：抉择之刻即将到来!</a>
                                <span class="weibu">12-11</span>
                            </li>
                        </ul>
                        <ul class="dema" id="a2">
                            <li class="made">
                                <a href="" class="xiya">12月24日德玛西亚，恕瑞玛大区网络环境升级维护公告</a>
                            </li>
                            <li class="xiamian">
                                <span class="qita">公告</span>
                                <a href="" class="shouhu">游戏环境公示及处罚名单12月20日</a>
                                <span class="weibu">12-20</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">公告</span>
                                <a href="" class="shouhu">12月20日免费英雄更新公告</a>
                                <span class="weibu">12-18</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">公告</span>
                                <a href="" class="shouhu">关于商城故障首批异常账号处理完毕公告</a>
                                <span class="weibu">12-17</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">公告</span>
                                <a href="" class="shouhu">关于商城异常波动处理的后续公告</a>
                                <span class="weibu">12-14</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">公告</span>
                                <a href="" class="shouhu">关于商城异常波动的处理公告</a>
                                <span class="weibu">12-13</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">公告</span>
                                <a href="" class="shouhu">9.24版本更新公告：厄斐琉斯震撼登场</a>
                                <span class="weibu">12-11</span>
                            </li>
                        </ul>
                        <ul class="dema" id="a3">
                            <li class="made">
                                <a href="" class="xiya">12月24日德玛西亚，恕瑞玛大区网络环境升级维护公告</a>
                            </li>
                            <li class="xiamian">
                                <span class="qita">新闻</span>
                                <a href="" class="shouhu">12月26日德杯八强淘汰赛开启</a>
                                <span class="weibu">12-24</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">视频</span>
                                <a href="" class="shouhu">《英雄麦克疯》：明凯教练骚话连篇</a>
                                <span class="weibu">12-23</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">视频</span>
                                <a href="" class="shouhu">选手靠谱时刻：德杯欢乐采访合集</a>
                                <span class="weibu">12-23</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">赛事</span>
                                <a href="" class="shouhu">小组赛圆满结束 兮夜首秀超神阿卡丽</a>
                                <span class="weibu">12-23</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">视频</span>
                                <a href="" class="shouhu">《英雄麦克疯》：表面兄弟狂飙演技</a>
                                <span class="weibu">12-22</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">视频</span>
                                <a href="" class="shouhu">TOP5：Yogurt奇亚娜致命奇袭势不可挡</a>
                                <span class="weibu">12-22</span>
                            </li>
                        </ul>
                        <ul class="dema" id="a4">
                            <li class="made">
                                <a href="" class="xiya">拉面熊进化无影剑 云顶火炮成关键输出装</a>
                            </li>
                            <li class="xiamian">
                                <span class="qita">教学</span>
                                <a href="" class="shouhu">云顶版本4大幻神 登顶率前4率双高</a>
                                <span class="weibu">12-22</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">教学</span>
                                <a href="" class="shouhu">图奇重拾ADC荣光 版本五路强势英雄推荐</a>
                                <span class="weibu">12-21</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">教学</span>
                                <a href="" class="shouhu">云顶新法海再称王 转型控制流核弹石头人</a>
                                <span class="weibu">12-21</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">教学</span>
                                <a href="" class="shouhu">梦魇成为金牌大C 9.24云顶3费卡评级</a>
                                <span class="weibu">12-19</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">教学</span>
                                <a href="" class="shouhu">刺客奥恩自带三把电刀 云顶雷霆刺化守为攻</a>
                                <span class="weibu">12-19</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">教学</span>
                                <a href="" class="shouhu">9.24六狂雷霆劫 爆炸AOE瞬间带走对手</a>
                                <span class="weibu">12-18</span>
                            </li>
                        </ul>
                        <ul class="dema" id="a5">
                            <li class="made">
                                <a href="" class="xiya">漫画：皮肤少得可怜的奥恩过圣诞啦！</a>
                            </li>
                            <li class="xiamian">
                                <span class="qita">娱乐</span>
                                <a href="" class="shouhu">G2老板和Perkz的约会：阿P发际线令人担忧！</a>
                                <span class="weibu">12-23</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">娱乐</span>
                                <a href="" class="shouhu">Caps接受采访：期待2020年和Forg1ven交手</a>
                                <span class="weibu">12-23</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">娱乐</span>
                                <a href="" class="shouhu">晋升奶爸！前FNC功勋辅助YellowStaR晒出自己的宝宝</a>
                                <span class="weibu">12-23</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">娱乐</span>
                                <a href="" class="shouhu">VG官方祝kkOma生日快乐：期待kkOma带领队伍腾飞！</a>
                                <span class="weibu">12-23</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">新闻</span>
                                <a href="" class="shouhu">虎扑专访VG双C-iBoy：不想遇到EDG！怕被他们打爆</a>
                                <span class="weibu">12-22</span>
                            </li>
                            <li class="xiamian">
                                <span class="qita">新闻</span>
                                <a href="" class="shouhu"> 选手生日簿：祝FPX上单选手Khan生日快乐！</a>
                                <span class="weibu">12-22</span>
                            </li>
                        </ul>
                        <a href="" class="zuidi">
                            <span class="n1">阅读更多</span>
                            <span class="n2">最新资讯</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;
}
.dema{
    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‘;
}