原生js制作tab选项卡新闻列表切换特效



103 410 137



特效描述:原生js制作 tab选项卡 新闻列表 切换特效,原生js制作tab选项卡新闻列表切换特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/tab.css" />

2. HTML代码

    <div id="tab">
        <h3 class="up" id="two1" onmouseover="setContentTab('two',1,4)">热点新闻</h3>
        <div class="block" id="con_two_1">
            <ul>
                <li><a class="tab_menu" href="#">[新闻热点]</a><a class="tab_title" href="#">点点妙:欢庆“十一”送祝福</a><span>2014-09-05</span></li>
                <li><a class="tab_menu" href="#">[新闻热点]</a><a class="tab_title" href="#">点点妙携手移动端APP 开创棋牌游戏新模</a><span>2014-09-05</span></li>
                <li><a class="tab_menu" href="#">[新闻热点]</a><a class="tab_title" href="#">看棋牌大亨如何颠覆快播江湖</a><span>2014-09-05</span></li>
                <li><a class="tab_menu" href="#">[新闻热点]</a><a class="tab_title" href="#">棋牌行业:解密点点妙合作内幕 分成竟高达</a><span>2014-09-05</span></li>
            </ul>
        </div>
        <h3 id="two2" onmouseover="setContentTab('two',2,4)">合作播报</h3>
        <div id="con_two_2">
            <ul>
                <li><a class="tab_menu" href="#">[合作播报]</a><a class="tab_title" href="#">收银妹代理棋牌游戏 成功晋级游戏女老板2</a><span>2014-09-05</span></li>
                <li><a class="tab_menu" href="#">[合作播报]</a><a class="tab_title" href="#">收银妹代理棋牌游戏 成功晋级游戏女老板1</a><span>2014-09-05</span></li>
                <li><a class="tab_menu" href="#">[合作播报]</a><a class="tab_title" href="#">IT精英放弃高薪只因想“玩”游戏</a><span>2014-09-05</span></li>
                <li><a class="tab_menu" href="#">[合作播报]</a><a class="tab_title" href="#">“干爹”扶持,乐猴棋牌开疆拓土</a><span>2014-09-05</span></li>
            </ul>
        </div>
        <h3 id="two3" onmouseover="setContentTab('two',3,4)">行业咨询</h3>
        <div id="con_two_3">
            <ul>
                <li><a class="tab_menu" href="#">[行业咨询]</a><a class="tab_title" href="#">收银妹代理棋牌游戏 成功晋级游戏女老板3</a><span>2014-09-05</span></li>
                <li><a class="tab_menu" href="#">[行业咨询]</a><a class="tab_title" href="#">紫金阁:代理棋牌游戏如何能稳赚不亏?</a><span>2014-09-05</span></li>
                <li><a class="tab_menu" href="#">[行业咨询]</a><a class="tab_title" href="#">你知道吗?“紫金阁”竟然升级做了“小三”</a><span>2014-09-05</span></li>
                <li><a class="tab_menu" href="#">[行业咨询]</a><a class="tab_title" href="#">都市娱乐赚钱首选 棋牌游戏代理</a><span>2014-09-05</span></li>
            </ul>
        </div>
        <h3 id="two4" onmouseover="setContentTab('two',4,4)">运营攻略</h3>
        <div id="con_two_4">
            <ul>
                <li><a class="tab_menu" href="#">[运营攻略]</a><a class="tab_title" href="#">加盟网络棋牌游戏的注意事项</a><span>2014-09-05</span></li>
                <li><a class="tab_menu" href="#">[运营攻略]</a><a class="tab_title" href="#">奇葩:一款可以自动赚钱的棋牌游戏</a><span>2014-09-05</span></li>
                <li><a class="tab_menu" href="#">[运营攻略]</a><a class="tab_title" href="#">代理棋牌游戏 紫金阁支招稳赚不亏</a><span>2014-09-05</span></li>
                <li><a class="tab_menu" href="#">[运营攻略]</a><a class="tab_title" href="#">棋牌行业内幕:什么时候代理棋牌游戏最合适</a><span>2014-09-05</span></li>
            </ul>
        </div>
    </div>
<script type="text/javascript">
function setContentTab(name, curr, n) {
    for (i = 1; i <= n; i++) {
        var menu = document.getElementById(name + i);
        var cont = document.getElementById("con_" + name + "_" + i);
        menu.className = i == curr ? "up" : "";
        if (i == curr) {
            cont.style.display = "block";
        } else {
            cont.style.display = "none";
        }
    }
}
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 文字叠加 滚动切换 滑动选项卡切换 文字拖动 文字提示框 文字收缩展开 文字放大缩小 文字翻转旋转 文字淡出淡进 文字全屏 文字延迟加载 360全景 html5文字动画 文字滚动 文字滑动 文字切换 选项卡切换 滑动手风琴 图片文字 文字导航菜单 文字 文字列表 选项卡自动切换 列表切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到