效果：

代码：

<!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. nginx+gunicorn

    wsgi接口,使用gunicorn作为server,想在外层加nginx. 配置了 proxy_pass   http://127.0.0.1:9008; 访问报301. 参考gunicorn 官网配 ...

  2. 微软开放技术开发了适用于 Windows Azure 移动服务的开源 Android SDK

     发布于 2014-02-10 作者 陈 忠岳 为进一步实现连接微软与非微软技术的目标,微软开放技术有限公司开发了适用于 Windows Azure 移动服务的 Android SDK,由Scot ...

  3. 【转】iOS开发者申请发布证书及真机调试图文详解

    原文网址:http://www.tqcto.com/article/mobile/57822.html 打开iOS Dev Center,选择Sign in,登陆(至少99美元账号),登陆之后在网页右 ...

  4. （转载）MySQL数据类型中DECIMAL的作用和用法

    (转载)http://database.51cto.com/art/201005/201651.htm 在MySQL数据类型中,例如INT,FLOAT,DOUBLE,CHAR,DECIMAL等,它们都 ...

  5. android报错——findViewById报错

    通過ID找到Layout的 VIEW控件.,比如你的控件Button ID為"@+id/button01"   就可以通過這樣Button btn=(Button)findView ...

  6. dfs 生成排列和组合

    利用深度优先搜索的性质可以方便的生成n的排列和组合,但是生成组合时每个组合里面元素的个数必须事先确定,以前以为生成组合跟排列一样到n时就可以回溯,直到今天做了某题之后才发现那是错的,那样做生成不了所有 ...

  7. CMD删除Mysql 服务

    用sc.exe这个命令可以删除Windows系统服务 开始 —> 运行 —> cmd.exe,然后输入sc就可以看到了. 使用办法很简单: sc delete "服务名" ...

  8. Web---创建Servlet的3种方式、简单的用户注册功能

    说明: 创建Servlet的方式,在上篇博客中,已经用了方式1(实现Servlet接口),接下来本节讲的是另外2种方式. 上篇博客地址:http://blog.csdn.net/qq_26525215 ...

  9. HW4.13

    public class Solution { public static void main(String[] args) { int n = 0; while(n * n * n < 120 ...

  10. poj 1193 内存分配

    好麻烦的模拟题,一次性过了就好!!!不过用了两天哦.. 小伙伴们慢慢做哦. #include <iostream> #include <list> #include <q ...