teb切换

页面的切换

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‘;
}

　　

原文地址：https://www.cnblogs.com/wangzihao147/p/12114254.html

时间： 2024-11-01 10:54:30

teb切换的相关文章

ionic 自定义teb切换

//HTML 代码 <div class="row"> <div class=" tabs gem-position-static profile-tabs" ng-repeat="item in initSlideTabs.data"> <a class="tab-item " href="#" ng-click="activeSlide($index)"

线程局部存储（TLS）

线程局部存储(TLS) 2011-10-11 09:59:28|  分类: Win32---API |  标签:tls   |举报 |字号 订阅 什么是线程局部存储 众所周知,线程是执行的单元,同一个进程内的多个线程共享了进程的地址空间,线程一般有自己的栈,但是如果想要实现某个全局变量在不同的线程之间取不同的值,而且不受影响.一种办法是采用线程的同步机制,如对这个变量的读写之处加临界区或者互斥量,但是这是以牺牲效率为代价的,能不能不加锁呢?线程局部存储(TLS)就是干这个的. 虽然TLS 很方便

teb教程3

配置和运行机器人导航 简介:配置teb_local_planner作为navigation中local planner的插件 参考teb安装 由于局部代价地图的大小和分辨率对优化性能影响很大,因为占据代价地图网格被看做单个点障碍物:那么对于巨大的障碍物数量,在多拓扑结构中并行规划可能会失败.为了避免这样,可以增加分辨率或者减小地图直到问题被修复或者通过其他方法如,尝试轻微减小参数h_signature_prescaler的值. 已知的一些问题 如果机器人在很小的窄道里面尝试旋转,可能会发生的是规

android Activity 的生命周期 以及横屏竖屏切换时 Activity 的状态变化

生命周期Android 系统在Activity 生命周期中加入一些钩子,我们可以在这些系统预留的钩子中做一些事情.例举了 7 个常用的钩子:protected void onCreate(Bundle savedInstanceState)protected void onStart()protected void onResume()protected void onPause()protected void onStop()protected void onRestart()protecte

zabbix切换数据库思路

zabbix切换数据库操作 1.安装mysql-server数据库 ,讲三个表结构复制过去 将schema.sql  images.sql   data.sql  数据库从zabbix服务器上复制到/root路径下面 然后导入表结构 [[email protected] ~]#  /usr/bin/mysql -uzabbix -pzabbix zabbix < /root/schema.sql Warning: Using a password on the command line inte

vue类似tab切换的效果，显示和隐藏的判断。

两者切换,动态显示对应的列表详情. 通过v-show的判断 数据驱动

FragmentTabHost切换Fragment避免重新加载Fragment，即重复调用Fragment的onCreateView

FragmentTabHost一切换再返回的时候Fragment就会调用onCreateView重新绘制页面,被这个问题坑了好久.刚开始也不知道是 FragmentTabHost还是Fragment的原因,网上找了好久也没找到解决办法.终于搜了好久还是找到了: 解决方法,在fragment onCreateView 里缓存View: private View rootView;// 缓存Fragment view @Override public View onCreateView(Layout

Redis主从、sentinel故障自动切换

一.什么是redis主从复制? 主从复制,当用户往Master端写入数据时,通过Redis Sync机制将数据文件发送至Slave,Slave也会执行相同的操作确保数据一致:且实现Redis的主从复制非常简单. 二.redis主从复制特点 1.同一个Master可以拥有多个Slaves. 2.Master下的Slave还可以接受同一架构中其它slave的链接与同步请求,实现数据的级联复制,即Master->Slave->Slave模式: 3.Master以非阻塞的方式同步数据至slave,这将

WPF布局间的切换方法

效果图,两种效果间的切换 xaml: <StackPanel> <Button Content="wrap布局" Click="Button_Click" Width="100"></Button> <Button Content="stack布局" Click="Button_Click_1" Width="100"></Butto