效果：

代码：

<!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. 在windows下解压缩Linux内核源代码出现重复文件原因

    在windows下解压缩Linux内核源代码出现重复文件原因 2009年06月30日 13:35 来源:ChinaUnix博客 作者:embededgood 编辑:周荣茂     原因一.因为在Lin ...

  2. wojilu中的路由

    要看2个地方,一个是route.config,另一个是wojilu.Members.Sites.Domain.SiteMenu.config,这2部分综合起作用.

  3. 《C语言程序设计现代方法》第1章 C语言概述

    C语言的特点:C语言是一种底层语言.C语言是一种小型语言.C语言是一种包容性语言. C语言的优点:高效.可移植.功能强大.灵活.标准库.与UNIX系统集成. C语言的缺点:C程序更容易隐藏错误.C程序 ...

  4. 页面中引入带中文的JS文件乱码问题

    1. WebConfig: <globalization requestEncoding="gb2312" responseEncoding="gb2312&quo ...

  5. 一步一步写一个简单通用的makefile(三)

    上一篇一步一步写一个简单通用的makefile(二) 里面的makefile 实现对通用的代码进行编译,这一章我将会对上一次的makefile 进行进一步的优化. 优化后的makefile: #Hel ...

  6. Python的基本语法，涵盖数据类型、循环判断、列表、map和set等

    以#开头的语句是注释 当语句以冒号“:”结尾时,缩进的语句视为代码块.一般缩进4个空格 Python程序是大小写敏感的,如果写错了大小写,程序会报错. Python的数据类型 整型 浮点型 字符串 布 ...

  7. 为什么用 Java：一个 Python 程序员告诉你

    这篇文章专门给程序员写的,普通读者慎入.原作者:Kevin Sookocheff 译者:Celia Zhen,原文点击文末链接. 每当我告诉别人我一直在用Java工作时,大家的反应都是: “纳尼!Ja ...

  8. windows下redis的安装配置和php扩展使用phpredis

    1. 首先安装先下载redis数据库     下载地址: http://code.google.com/p/servicestack/wiki/RedisWindowsDownload 目前是2.02 ...

  9. 【杭州(含嘉兴，绍兴，金华，湖州，义乌)】Uber优步司机奖励政策（2月1日~2月7日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  10. Web测试点 转

    一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符"~!@#￥%--&*?[]{}"特别要注意单引号和&符号.禁止直 ...