效果：

代码：

<!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. 【CF】310 Div.1 C. Case of Chocolate

    线段树的简单题目,做一个离散化,O(lgn)可以找到id.RE了一晚上,额,后来找到了原因. /* 555C */ #include <iostream> #include <str ...

  2. 灰度图像--图像增强 直方图均衡化（Histogram equalization）

    灰度图像--图像增强 直方图均衡化(Histogram equalization) 转载请标明本文出处:http://blog.csdn.net/tonyshengtan,欢迎大家转载,发现博客被某些 ...

  3. asp.net 前后台交互

    转自:http://www.cnblogs.com/softpower/archive/2010/11/16/1878769.html 1.如何在JavaScript访问C#函数? 2.如何在Java ...

  4. java 正则表达式去除标点符号

      public class Test { public static void main(String[] args) { String str = "!!!??!!!!%*)%￥!KTV ...

  5. HDU-1686 Oulipo

    学习:重点理解这句话的意思: next[j]会告诉我们从哪里开始匹配     模板题. Oulipo Time Limit: 3000/1000 MS (Java/Others)    Memory ...

  6. 《C语言程序设计现代方法》第2章 编程题

    7 编写一个程序,要求用户输入一个美金数量,然后显示出如何使用最少的20美元.10美元.5美元和1美元来付款. 提示:将付款金额除以20,确定20美元的数量,然后从付款金额中减去20美元的总金额.对其 ...

  7. （DT系列五）Linux kernel 是怎么将 devicetree中的内容生成plateform_device

    Linux kernel 是怎么将 devicetree中的内容生成plateform_device 1,实现场景(以Versatile Express V2M为例说明其过程)以arch/arm/ma ...

  8. linux IPC总结——管道

    管道 管道是unix ipc的最古老形式,是一种在内存中的特殊文件,只能在具有公共祖先的进程之间使用(即父子进程,兄弟进程). 管道由pipe函数创建 #include <unistd.h> ...

  9. 让IE6兼容position:fixed

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. pci转并口卡的安装使用

    pci转并口卡模拟出来的并口并不能完全等同于主板上真正的并口.真正的并口打印的时候可以“直接瓶口输出”打印,而不需要安装打印驱动程序. 这个模拟出来的并口却不能使用“直接瓶口输出”(打印机不打印,程序 ...