效果：

代码：

<!doctype html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>JavaScript实现多栏目切换效果</title>

    <style>

        .news_wrap

        {

            width: 380px;

            height: 266px;

            float: left;

            margin-left: 15px;

        }

        .news_head

        {

            width: 380px;

            border-bottom: 2px solid #dedede;

            height: 51px;

            line-height: 51px;

        }

        .tabList ul li

        {

            float: left;

            cursor: pointer;

            font-weight: bold;

            text-align: center;

            font-size: 16px;

            width: 72px;

        }

        .cli1

        {

            color: #3a7aaf;

            border-bottom: 2px solid #3a7aaf;

        }

        .more

        {

            font-size: 14px;

            color: #9a9a9a;

            float: right;

            font-weight: normal;

            padding-right: 0;

        }

        .tabCon

        {

            width: 376px;

            padding-top: 13px;

            overflow: hidden;

        }

    </style>

</head>

<body>

    <div class="news_wrap">

        <div class="news_head">

            <div class="tabList">

                <ul>

                    <li class="cli1" id="p1" onmouseover="return swap_tab(1)">工作动态</li>

                    <li class="cli2" id="p2" onmouseover="return swap_tab(2)">媒体链接</li>

                    <li class="cli2" id="p3" onmouseover="return swap_tab(3)">领导活动</li>

                </ul>

            </div>

            <div class="more">

                <div id="j1">

                    工作动态_more</div>

                <div id="j2" style="display: none;">

                    媒体链接_more</div>

                <div id="j3" style="display: none;">

                    领导活动_more

                </div>

            </div>

        </div>

        <div class="tabCon">

            <div id="n1">

                <li>工作动态_list</li>

                <li>工作动态_list</li>

                <li>工作动态_list</li>

            </div>

            <div id="n2" style="display: none;">

                <li>媒体链接_list </li>

                <li>媒体链接_list </li>

                <li>媒体链接_list </li>

            </div>

            <div id="n3" style="display: none;">

                <li>领导活动_list </li>

                <li>领导活动_list </li>

                <li>领导活动_list </li>

            </div>

        </div>

    </div>

</body>

<script>

    function swap_tab(n) { //鼠标触发事件

        for (var i = 1; i < 4; i++) {

            var curC = document.getElementById("n" + i);

            var curB = document.getElementById("p" + i);

            var mores = document.getElementById("j" + i);

            if (n == i) {

                curC.style.display = "block";

                curB.className = "cli1";

                mores.style.display = "block";

            }

            else {

                curC.style.display = "none";

                curB.className = "cli2";

                mores.style.display = "none";

            }

        }

    }

</script>

</html>

JavaScript实现多栏目切换效果的更多相关文章

  1. JavaScript 实现 标签页 切换效果

    JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...

  2. javascript马赛克遮罩图片切换效果:XMosaic.js(转)

    新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...

  3. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  4. javascript实例学习之八——无缝切换效果

    无缝切换在网站的很多地方都有涉及,比如轮播图等. 基本思路: 1)将可视窗当前的元素复制,依次添加为ul中的子元素 2)改变ul整体的left取值(负的窗口值),动画缓动至想要的位置 3)将原视窗(已 ...

  5. 使用javascript实现图片上下切换效果并且实现顺序循环播放

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 无JavaScript实现选项卡轮转切换效果

    CSS:   .box{width:200px; height:100px; border:1px solid #ddd; overflow:hidden;}.list{width:200px; he ...

  7. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

  8. 《JavaScript 实战》：JavaScript 图片滑动切换效果

    看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧.由于有了做图片滑动展示效果的经验,做这个就容易得多了. 效果预览 仿淘宝/alibaba图片切换: 默 ...

  9. weui 多网页切换效果分析

    weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...

随机推荐

  1. 时区 : America/Mexico_City 中文:美国中部时间(墨西哥城) 的夏令时

    方法: (参数为: TimeZone timeZone = TimeZone.getTimeZone("America/Mexico_City"); private static ...

  2. 【CF】142 Div.1 B. Planes

    SPFA.注意状态转移条件,ans的求解需要在bfs中间求解.因为只要到了地点n,则无需等待其他tourist.还是蛮简单的,注意细节. /* 229B */ #include <iostrea ...

  3. 【HDOJ】1969 Pie

    二分. #include <stdio.h> #include <math.h> ; ]; int main() { int case_n, n, f, m; double r ...

  4. Centos6.5 安装Vim7.4

    系统本身会带Vim7.2都版本,其实也够用,强迫症患者可以按以下操作升级成Vim7.4: (1)切换到root权限 (2)卸载 rpm -qa | grep vim yum remove vim vi ...

  5. oracle core04_undo

    undo信息 oracle中undo的信息主要完成下面的功能: 1,构建块一致性读 2,回滚事务 UBA:undo block address 1,块中的事务槽ITL中的UBA表示这个ITL所在的bl ...

  6. MySQL源码之两阶段提交

    在双1的情况下,两阶段提交的过程 环境准备:mysql 5.5.18, innodb 1.1 version配置: sync_binlog=1 innodb_flush_log_at_trx_comm ...

  7. 【Moment.js】

    Moment.js Moment.js中文网 var moment = require('moment') moment.locale('zh-cn') /* 九月 13日 2015, 4:45:25 ...

  8. [转]CharacterController与Rigidbody

    From: http://blog.csdn.net/czlilove/article/details/9139103 今天下午碰到个问题纠结了很久:人物加上了Rigidbody并使用了重力,遇到悬崖 ...

  9. 【转】Android源代码编译命令m/mm/mmm/make分析--不错

    原文网址:http://blog.csdn.net/luoshengyang/article/details/19023609 在前文中,我们分析了Android编译环境的初始化过程.Android编 ...

  10. 安卓开发无法识别手机原因之一：手机SDK比工程要求的最小SDK低

      创建工程时,设置限制的最小SDK:   如果你手机的内核版本比你工程的设置的最小SDK低,则不显示   来自为知笔记(Wiz)