1、效果图

2、HTML代码如下

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

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

    <title></title>

    <script src="IndusJS/jquery.min.js"></script>

    <style type="text/css">

.main02 {width:100%;}

#title02 {height:25px;line-height:25px;overflow:hidden;border-bottom:2px solid black;}

#title02 ul

{

  width:100%;

  height:25px;

  margin:0px;

}

#title02 ul li {float:left; width:65px; height:20px;line-height:20px; color:#333;list-style:none;  cursor:pointer; font-weight:bold;text-align:center;}

#title02 li.on {background-color:blueviolet;color:white;}

#con02 {background:#fafafa;height:100px;}

#con02 div.off {display:none; padding:5px;}

#con02 div.on {display:block;}

    </style>

</head>

<body>

<div style="width:400px;height:500px;">

    <div id="diva0" class="main02">

      <div id="title02">

        <ul>

           <li class="on">标题1</li>

           <li>标题2</li>

           <li>标题3</li>

        </ul>

      </div>

      <div id="con02" style="width:100%;height:70px;">

       <div id="diva2" class="on" style="padding:15px 0px 0px 15px;">

      标题1

     </div>

       <div id="diva3" class="off">

         标题2

     </div>

       <div id="diva4" class="off">

     标题3

    </div>

      </div>

    </div>

</div>

</body>

</html>

<script type="text/javascript">

    var bTitle = document.getElementById('title02');

    var cSpan = bTitle.getElementsByTagName('li');

    var i = 0;

    for (i = 0; i < cSpan.length; i++) {

        switch (i) {

            case 0:

                cSpan[0].onclick = function () {

                    cSpan[0].className = 'on';

                    cSpan[1].className = '';

                    cSpan[2].className = '';

                    $('#diva2').attr('class', 'on');

                    $('#diva3').attr('class', 'off');

                    $('#diva4').attr('class', 'off');

                }

                break;

            case 1:

                cSpan[1].onclick = function () {

                    cSpan[0].className = '';

                    cSpan[1].className = 'on';

                    cSpan[2].className = '';

                    $('#diva2').attr('class', 'off');

                    $('#diva3').attr('class', 'on');

                    $('#diva4').attr('class', 'off');

                }

                break;

            case 2:

                cSpan[2].onclick = function () {

                    cSpan[0].className = '';

                    cSpan[1].className = '';

                    cSpan[2].className = 'on';

                    $('#diva2').attr('class', 'off');

                    $('#diva3').attr('class', 'off');

                    $('#diva4').attr('class', 'on');

                }

                break;

        }

    }

</script>

Jquery 实现标签切换效果的更多相关文章

  1. 实例：jQuery实现标签切换

    具体实现效果如图: 原理很简单,就是监听鼠标滑动和点击事件.在第一个标签切换的示例中,当鼠标滑过某个标签时,就把class转移到当前标签.这里用到的jQuery方法主要是each()确定当前是哪一个标 ...

  2. jquery实战---标签页效果

    在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...

  3. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  4. Axure RP Pro 7.0苏宁易购式标签切换效果教程

    转:http://jingyan.baidu.com/article/7082dc1c4f0a11e40a89bdac.html 页面标签切换效果,几乎是所有大网站(尤其是电商类网站)标配的交互方式: ...

  5. 基于jQuery图像碎片切换效果插件FragmentFly

    基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_ ...

  6. jquery swiper3自定义切换效果的方法

    jquery swiper3自定义切换效果的方法 <pre> <div class="swiper-slide"> <div class=" ...

  7. jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )

    1.页面切换(data-transition)

  8. [Jquery]tab页面切换效果

    思路:取得头部和内容的div,头部当前点击的高亮,其余的去除高亮,并通过index()方法获得当前点击的索引,然后内容div通过.eq(index)显示和隐藏 优化:当前做法,从第一个快速移到最后一个 ...

  9. Jquery实现图片切换效果（IE,FF,Goole）都可以正常运行

    这里先对标签的样式进行设置(我这里只用了3张图片,可以根据自己的情况,添加) <style type="text/css"> /*展示图片切换的div样式*/ #Sho ...

随机推荐

  1. Codevs 1148 == 洛谷 P1057 传球游戏

    1148 传球游戏 2008年NOIP全国联赛普及组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题目描述 Description 上体育课的时候,小蛮的老师 ...

  2. 【CF1015C】Songs Compression（贪心）

    题意: 给定n和m,n组(a[i],b[i]),每一组a[i]可以压缩为b[i],求最少只需要压缩几个,使得m可以存下所有数据,无解输出-1 思路:按差贪心,排序 #include<cstdio ...

  3. 【vijos1144】小胖守皇宫（树形DP）

    描述 huyichen世子事件后,xuzhenyi成了皇上特聘的御前一品侍卫. 皇宫以午门为起点,直到后宫嫔妃们的寝宫,呈一棵树的形状:某些宫殿间可以互相望见.大内保卫森严,三步一岗,五步一哨,每个宫 ...

  4. luogu 1354 房间最短路问题 线段与直线相交 最短路

    题目链接 题目描述 在一个长宽均为10,入口出口分别为(0,5).(10,5)的房间里,有几堵墙,每堵墙上有两个缺口,求入口到出口的最短路经. 输入输出格式 输入格式: 第一排为n(n<=20) ...

  5. 标准C程序设计七---111

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  6. osstatus -9801 workerman websocket 小程序不带端口

    帮事业部的同事,解决问题,坑总结 小程序出现,osstatus -9801 情况好多,说一下配置环境可解决的方法和问题 tls 1.2, php 5.6+, nginx, workerman 做的 w ...

  7. 一分钟学会Spring Boot多环境配置切换

    一. 问题由来 开发环境.测试环境.生产环境--------我们的软件在不同的环境中,系统参数和配置可能会不一样,比如数据源配置.日志文件配置.以及一些软件运行过程中的基本配置,那每次我们将软件部署到 ...

  8. 修改ViewPager调用setCurrentItem时，滑屏的速度 ,解决滑动之间切换动画难看

    在使用ViewPager的过程中,有需要直接跳转到某一个页面的情况,这个时候就需要用到ViewPager的setCurrentItem方法了,它的意思是跳转到ViewPager的指定页面,但在使用这个 ...

  9. ubuntu配置django

    安装 安装Apache sudo apt-get install apache2 安装Django 下载Django 安装mod_wsgi sudo apt-get install libapache ...

  10. 网页Tab控件

    网页Tab控件 找到:http://www.open-open.com/ajax/2_Tabs.htm 页面,查看了若干Tab控件, 找到了:http://www.open-open.com/ajax ...