思路：点击按钮后，先让所有的按钮的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. Linux内核学习资料

    1.为什么计算机的学生要学习Linux开源技术 http://tinylab.org/why-computer-students-learn-linux-open-source-technologie ...

  2. python学习之路-第七天-python面向对象编程简介

    面向对象编程 在python中,同样是类和对象作为重要的组成部分. 而且在python中基本数据类型如int都是有封装类的,都有自己的方法,应该是和java里面的Integer类似吧 类包括域和方法: ...

  3. Q35+uefi or bios+legacy // PCI | PCIE

    1:首先统一可扩展固件接口(UEFI)是一种规范定义操作系统和平台固件之间的软件接口. UEFI旨在替代基本输入/输出系统(BIOS)固件接口.(legacy) 硬件平台厂商越来越多地采用UEFI管理 ...

  4. PAT 天梯赛 L1-008. 求整数段和 【水】

    题目链接 https://www.patest.cn/contests/gplt/L1-008 AC代码 #include <iostream> #include <cstdio&g ...

  5. cdoj1339郭大侠与线上游戏

    地址:http://acm.uestc.edu.cn/#/problem/show/1339 题目: 郭大侠与线上游戏 Time Limit: 6000/2000MS (Java/Others)    ...

  6. Ubuntu启动文件破坏启动恢复方法

    reboot后主机登录显示如下图: 解决步骤: 1.fs0:(回车) 2.edit startup.nsh 3.添加下面字段: fs0: cd EFI/ubuntu grubx64.efi 4.重启即 ...

  7. poj2993

    #include<stdio.h> #include<string.h> #include<algorithm> using namespace std; stru ...

  8. c++的格式控制

    1: 每个iostream对象维持一个控制IO格式化细节的格式状态.标准库定义了一组操纵符来修改对象的格式状态.所谓操纵符是可用作输入或输出操作符的函数或对象.iostream和iomanip头文件中 ...

  9. Python3：input()输入函数的用法

    Python3:input()输入函数的用法 一.简介 input这个函数,第一个参数是提示语,它默认是空的.在我们使用input的时候,会从标准输入中读取一个string,即字符串(请注意,这里很重 ...

  10. NEVER QUIT. NEVER SAY NEVER.

    有志者不是从不失败,而是从不妥协. NEVER QUIT. NEVER SAY NEVER. 2015/09/15 Winners are not those who never fail but t ...