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. 【CF1023C】Bracket Subsequence(模拟)

    题意:给定一个正则括号序列 s ,让你在当中选择一个长度正好为 t 的子串,使得 t 恰好也是一个正则括号序列 思路:用栈模拟 #include<cstdio> #include<c ...

  2. 用promise做图片的预加载

    var url='jsonp-master/0.jpg' var url1='jsonp-master/1.jpg' var url2='jsonp-master/2.jpg' var img=doc ...

  3. bootstrapTable 应用小例(收索)

    <script src="/plugins/My97DatePicker/WdatePicker.js"></script> <!-- Content ...

  4. AC日记——Andryusha and Socks Codeforces 780a

    A. Andryusha and Socks time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  5. wangzhi

    http://blog.const.net.cn/a/9145.htm http://blog.sina.com.cn/s/blog_bf5abc95010169jf.html http://ciss ...

  6. Xamarin.Forms XAML控件的公共属性

    Xamarin.Forms XAML控件的公共属性   Xamarin.Forms XAML控件有很多.通过官网API,可以查看每个控件的属性.但是官网只给出了控件的特有属性,而公共属性没有列出.所以 ...

  7. 预防SQL注入笔记

    SQL注入如何预防? 本文参考自owasp,重点是提供清晰,简单,可操作的指导,以防止应用程序中的SQL注入漏洞.不幸的是,SQL注入攻击很常见,这是由于两个因素: SQL注入漏洞的显着流行 目标的吸 ...

  8. Java-ArrayList使用技巧---从第一个List中去除所有第二个List中与之重复的元素

    需求:从 mAllList 中去除所有 mSubList 中与之重复的元素 测试数据:mAllList 中包含100000个无序无重复字符串,mSubList 中包含50000个无序无重复字符串 方法 ...

  9. Android自定义控件之自定义组合控件(三)

    前言: 前两篇介绍了自定义控件的基础原理Android自定义控件之基本原理(一).自定义属性Android自定义控件之自定义属性(二).今天重点介绍一下如何通过自定义组合控件来提高布局的复用,降低开发 ...

  10. Android获取状态栏和标题栏的高度

    版权声明:本文为博主原创文章,未经博主允许不得转载. 1.获取状态栏高度: decorView是window中的最顶层view,可以从window中获取到decorView,然后decorView有个 ...