利用js实现选项卡的特别效果的实例

代码如下:

<html>
<head>
    <meta charset="utf-8"/>
    <style type="text/css">
        *{margin:0;padding:0;border:0}
        #main{width:300px;height:300px;background-color:green}
        #head{height:50px;background-color:red}
        #head li{float:left;list-style:none;height:50px;width:72px;text-align:center;line-height:50px;background-color:orange;margin-right:3px}
    </style>
</head>
<body>
    <div id="main">
    <div id="head">
    <ul>
        <li id="tab1" onclick="show(1)" style="background-color:green">新闻</li>
        <li id="tab2" onclick="show(2)">体育</li>
        <li id="tab3" onclick="show(3)">音乐</li>
        <li id="tab4" onclick="show(4)">娱乐</li>
    </ul>
    </div>
    <div id="content">
    <p id="p1">今天习总书记去乌干达访问了</p>
    <p id="p2" style="display:none">乔丹改打乒乓球了</p>
    <p id="p3" style="display:none">江南style</p>
    <p id="p4" style="display:none">赵本山退出春晚</p>
    </div>
    </div>
</body>
    <script>
        function show(n){
            for(var i=1;i<=4;i++){
            //先把所有的选项卡背景颜色设为橙色，内容都隐藏
                document.getElementById("tab"+i).style.backgroundColor = 'orange';
                document.getElementById("p"+i).style.display = 'none';
            }
                document.getElementById("tab"+n).style.backgroundColor = 'green';
                document.getElementById("p"+n).style.display = "block";
        }

</script>
</html>

赞 (0)

相关推荐

  • JS基于面向对象实现的选项卡效果示例

    本文实例讲述了JS基于面向对象实现的选项卡效果.分享给大家供大家参考,具体如下: 中间过渡环节:把面向过程的程序,改写成面向对象的形式 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 input {background:#CCC;} #div1 .active {background:yellow;} #div1 div {width:200px; height:200

  • js实现tab选项卡函数代码

    * { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-size: 12px; padding-top: 0px; } BODY { padding-left: 20px; padding-top: 20px; } .wid240 { width: 242px; margin-bottom: 20px; } .wid180 { width: 182px; } .tab { border-b

  • JS+DIV+CSS排版布局实现美观的选项卡效果

    JS+DIV+CSS排版布局实现美观的选项卡效果

    本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果.分享给大家供大家参考.具体如下: 这是一个基于JavaScript的简单选项卡代码,陪新手练习一下Div+CSS排版的技巧,本选项卡可以继续美化修饰完善,选项卡在目前在众多网站上应用广泛,确实是一个很不错的网页布局方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-pbbj-nav-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • javascript实现tabs选项卡切换效果(自写原生js)

    javascript实现tabs选项卡切换效果(自写原生js)

    现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下:  html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</

  • 学习javascript面向对象 实例讲解面向对象选项卡

    学习javascript面向对象 实例讲解面向对象选项卡

    本文实例讲解了最简单的面向对象选项卡实现方法,分享给大家供大家参考,具体内容如下 效果图: 1.功能说明 点击三个按钮分别显示对应的选项卡 2.html代码说明 <div class="box" id="box"> <ul class="list"> <li class="in_active">第一张选项卡</li> <li class="in">

  • js实现简单的可切换选项卡效果

    js实现简单的可切换选项卡效果

    本文实例讲述了js实现简单的可切换选项卡效果的方法.分享给大家供大家参考.具体如下: 如图,最简单的纯粹的选项卡 第一步,当然是先写html代码和css样式 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>无标题文档</title> <style> body,ul,li{margin:0; padding:0; font:12

  • JS+CSS实现的经典tab选项卡效果代码

    JS+CSS实现的经典tab选项卡效果代码

    本文实例讲述了JS+CSS实现的经典tab选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的JavaScript+CSS tab选项卡代码,由以前的一款改写而成,自认为不错的东西,发上来分享吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

  • js基于面向对象实现网页TAB选项卡菜单效果代码

    js基于面向对象实现网页TAB选项卡菜单效果代码

    本文实例讲述了js基于面向对象实现网页TAB选项卡菜单效果代码.分享给大家供大家参考.具体如下: 这是一款自动的网页TAB,基于面向对象的选项卡菜单,由于时间关系只做了简单的实现,界面没有美化,不多做介绍了. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mxdx-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

  • JS实现选项卡实例详解

    JS实现选项卡实例详解

    本文实例讲述了JS实现选项卡的方法.分享给大家供大家参考,具体如下: 思路:选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的. 1.首先获取元素. 2.for循环历遍按钮元素添加onclick 或者 onmousemove事件. 3.因为点击当前按钮时会以高亮状态显示,所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none. 4.把当前按钮添加样式,把当前DIV显示出来,display设置为bl

  • js简单实现竖向tab选项卡的方法

    本文实例讲述了js简单实现竖向tab选项卡的方法.分享给大家供大家参考.具体如下: 选项卡占据左边,而内容放在右边,一个适合新手的竖向的tab选项卡特效例子 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ru"> <head> <title>

  • js选项卡的实现方法

    本文实例讲述了js选项卡的实现方法.分享给大家供大家参考.具体分析如下: 一.思路 1. 获取元素: 2. for循环按钮元素添加onclick(点击) 或者 onmousemove(移入)事件: 3. 点击当前按钮时会以高亮状态显示,通过for循环历遍把所有的按钮样式设置为空在把所有div的display设置为none. 4. 点击当前按钮添加样式,把当前div显示出来,display设置为block. 二.html代码: <div id="div1"> <inpu

随机推荐