jQuery实现一个简单的选项卡效果

导读：大家写博客的时候有没有注意博客园的标题选项卡的效果是如何实现的？

如上图当我们点击文章时会自动切换到文章类型下。其他也是一样的。其实这种选项卡的效果在很多网站中出现。好啦现在我们来用jQuery和css来实现一下。

效果图：

步骤：一：使用div+css画出基本的界面。

二：jQuery实现动态效果。

哥们，如果你接触过WPF，这种思想是不是与WPF极其的相似。WPF中XAML语言画界面，C#写后台逻辑。

好啦，不解释啦。源码如下：

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    *{padding:0;margin:0;}
    body{padding:100px;font-size:15px;}
    ul{list-style-type:none;line-height:30px;height:30px;}
    .box ul li{float:left;padding:0 10px; position:relative; border:solid 1px #000;margin-right:5px;border-bottom:none;cursor:pointer;}
    .content{border:solid 1px #000;width:300px;height:100px;padding:10px;background:#5CACEE;}
    .onecolor{background:#5CACEE;}
    .twocolor{background:red;}
    </style>
    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".ct:gt(0)").hide(); //页面加载时只显示标题一的内容其余隐藏
            $(".box ul li:first").addClass("onecolor");
            $(".box ul li").click(function () {
                $(this).addClass("onecolor").siblings().removeClass("onecolor");
                var index = $(".box ul li").index(this); //索引进行匹配标题一对应标题一的内容索引，其他原理一样
                $(".ct").eq(index).show().siblings().hide();
            });
            $(".box ul li").hover(function () {
                $(this).addClass("twocolor").siblings().removeClass("twocolor");
            });
        });
    </script>
</head>
<body>
<div class="box">
<ul>
<li class="one">公司简介</li>
<li>公司动态</li>
<li>公司发展</li>
</ul>
<div class="content" id="divcontent">
<div class="ct">本公司位于珠三角地区的铜锣湾大药房</div>
<div class="ct">最近公司欢迎了郑伊健同学来我们公司拍黑社会电影</div>
<div class="ct">本公司计划发展成为全香港最大的黑社会集团专门从事黑夜性的活动</div>
</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/luodao1991/archive/2012/12/20/2826204.html

jQuery实现一个简单的选项卡效果相关推荐

html表格翻页简单,利用jQuery实现一个简单的表格上下翻页效果
前言本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果,注:实现原理与轮播图相似.下面话不多说,来看看详细的实现方法吧. html: 日期参与团购场次团购结果当前状态 02.08 第一 ...
Jquery一个简单的点赞效果，实现点赞数+1
Jquery一个简单的点赞效果,实现点赞数+1 1.导入JS <script src="js/jquery-3.3.1.js" type="text/javascr ...
用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
Unity3D 粒子系统实现一个简单的爆炸效果
一个简单的爆炸效果的实现. 先看效果. 一.准备四张贴图,做成材质二.新建一个Particle System 1. 设置形状 2. 3. 4. 5. 6. 7. 8. 曲线的第二个点往上提一点点 9 ...
用Python实现音频卷积，并制作一个简单的HRTF效果
用Python实现音频卷积,并制作一个简单的HRTF效果作为一个刚刚入门Python的小白用户,写出这篇文章还是废了我很大的力气,不过幸运的是,在网上到处东拼西凑,我还是把它给做出来了. 废话不多说 ...
Unity中用shader graph制作一个简单的传送门效果
Unity中用shader graph制作一个简单的传送门效果一.配置渲染管线 1.通过菜单"Asset" --> "Create" --> &q ...
使用HTML+CSS完成一个简单的立体字效果
使用HTML+CSS完成一个简单的立体字效果* 此处用木兰辞来举列子来看看效果 ps:技术不佳大佬们轻喷 /*标题及其立体效果*/ .Header {/*font-size: 50px;*//*fo ...
用alert、confirm、prompt与if语句的配合使用来完成一个简单的问答效果
作者:刘辉撰写时间:2019.1.22 众所周知,我们可以通过alert,confirm,prompt等来完成一个网页提示效果,那我们能不能通过这些来设置一个简单的问答小游戏呢?于是首先我们先在Ja ...
JQuery实现一个简单的鼠标跟随提示效果
效果体验:http://hovertree.com/texiao/jsstudy/2/ 实现思路 1 鼠标移入标题(这里是<a>标签) 创建一个div,div的内容为鼠标位置的文本将创建 ...
css3和jQuery实现一个简单的标签页效果
主要用css3另外一种jQuery思路方法来实现标签页的切换效果,主要用css3来实现一些渐变,阴影和圆角效果, css代码如下: body{width: 600px;margin: 100px au ...

jQuery实现一个简单的选项卡效果

jQuery实现一个简单的选项卡效果相关推荐

最新文章

热门文章