思路：点击按钮后，先让所有的按钮的class属性都为“”，所有的div的display样式都为none；再让当前被点击按钮的class属性为active，以及所对应的div的display样式为block。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
#nav button{width:200px;height:50px;}
#nav .active{background:yellow;}
.news{width:600px;height:600px;}
.a{display:block;background:pink;}
.b{display:none;background:blue;}
.c{display:none;background:green;}
</style>
<title>jquery制作选项卡</title>
<script src="jquery.min.js"></script>
<script>
$(function(){
　　$("#nav").find("button").click(function(){
　　　　$("#nav").find("button").attr("class","");
　　　　$("#news").find(".news").css("display","none");

　　　　$(this).attr("class","active");
　　　　$("#news").find(".news").eq($(this).index()).css("display","block");
　　});
});
</script>
</head>
<body>
<div id="nav">
<button class="active">新闻动态</button>
<button>专题制作</button>
<button>图片欣赏</button>
</div>
<div id="news">
<div class="news a">aaa</div>
<div class="news b">bbb</div>
<div class="news c">ccc</div>
</div>
</body>
</html>

jquery制作选项卡的更多相关文章

  1. jQuery制作弹出窗（模态框）

    来源:(二少)在南极 ##index.html <!DOCTYPE html><html lang="zh"><head> <meta c ...

  2. jquery制作论坛或社交网站的每天打卡签到特效

    效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...

  3. 如何使用jQuery 制作全屏幕背景的嵌入视频

    实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ...

  4. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  5. 使用 CSS3 & jQuery 制作漂亮的书签动画

    今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...

  6. 使用 CSS & jQuery 制作一款漂亮的多彩时钟

    大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...

  7. jQuery 制作逼真的日历翻转效果的倒计时

    在开发中,一些功能需要用到倒计时,例如最常见的活动开始.结束的倒计时.使用最流行的 JavaScript 库来制作这个效果很简单.下面就是一个 jQuery 制作的逼真的日历翻转效果的倒计时功能. 在 ...

  8. jQuery制作Web全屏效果

    需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...

  9. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

随机推荐

  1. filebeat 简介安装

    Filebeat is a lightweight shipper for forwarding and centralizing log data. Installed as an agent on ...

  2. Codeforces Round #245 (Div. 1)——Xor-tree

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u012476429/article/details/25607945 题目链接 题意: 给一棵树n个 ...

  3. python提示AttributeError: 'NoneType' object has no attribute 'append'

    在写python脚本时遇到AttributeError: 'NoneType' object has no attribute 'append' a=[] b=[1,2,3,4] a = a.appe ...

  4. Java Web专题

  5. CSS3自定义滚动条样式 之 -webkit-scrollbar

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  6. flex graphiclar symbol的不同比例尺切换

    private var cityGraL:GraphicsLayer;//标记城市 maxScale=50000 private var siteGraL:GraphicsLayer;//标记站点 m ...

  7. Maven的Mirror和Repository

    今天新公司入职,项目经理让迁出项目,心想maven的阿里镜像源挺快的,干脆在配置了公司私服之后自己配置了阿里的镜像源,没成想项目屡屡报错,找不到项目依赖的公司jar包,后来才发现,同事配置mirror ...

  8. APPIUM API整理（python）---其他辅助类

    App运行类 1.current_activity current_activity(self): 用法: print(driver.current_activity()) Retrieves the ...

  9. Android Gradle 构建工具(Android Gradle Build Tools)是什么？

    转载地址:http://mrfu.me/android/2015/07/17/New_Android_Gradle_Build_Tools/ 译者地址:[翻]一览新的 Android Gradle 构 ...

  10. 伸展树基础（Splay）

    3224: Tyvj 1728 普通平衡树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 3948  Solved: 1627 [Submit][St ...