效果：

代码：

<!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. 处理 insert 字段内容包含 单引号 的问题

    问题:postgreSQL insert 字段包含单引号,如:insert into table values('1001','tom'cat'),执行报错: 解决:将单引号替换为两个单引号,如 de ...

  2. android 中对apache httpclient及httpurlconnection的选择

    在官方blog中,android工程师谈到了如何去选择apache client和httpurlconnection的问题: 原文见http://android-developers.blogspot ...

  3. Makefile第三讲：终端传值给Makefile、Makefile传值给C++代码

    摘要 终端传值给Makefile,咋传?只需在终端输入以下命令,那么就可以在Makefile文件中放心大担的使用$(abcde)这个变量了,它的值为BBB Makefile fun.h #includ ...

  4. javascript在alert()出现中文乱码

    今天在写jquery代码时,alert()总是出现中文乱码 琢磨了好一会儿,在网上查的资料是html页面上设置charset为GB2312 <meta charset="GB2312& ...

  5. Selenium WebDriver + Grid2 + RSpec之旅（二）----Grid2的配置

    Selenium WebDriver + Grid2 + RSpec之旅(二) ----Grid2的配置 为什么要使用Selenium-Grid 分布式运行大规模的TestCase 能够通过一个中央节 ...

  6. 2D游戏编程1--windows编程模型

    一.创建一个windows程序步骤 1.创建一个windows类 2.创建一个事件处理程序 3.注册windows类 4.用之前创建的windows类创建一个窗口 5.创建一个主事件循环   二.存储 ...

  7. vi同类品

    nvi 更纯正,接近原始的vi command argument-F    don't copy whole file, may faster-S    secure help (quick refe ...

  8. HW4.25

    public class Solution { public static void main(String[] args) { double sum; for(int i = 10000; i &l ...

  9. PAT 1074. Reversing Linked List (25)

    Given a constant K and a singly linked list L, you are supposed to reverse the links of every K elem ...

  10. Linux 上的游戏 Supertuxkart

    Linux 上玩游戏 Supertuxkart 中午休息的时候,打开Supertuxkart游戏,这个是GNU下的一款3D赛车游戏,制作精美,玩法简单.最有趣的是,我连接笔记本的外接键盘被侦测出来是M ...