jquery制作选项卡
思路：点击按钮后，先让所有的按钮的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制作选项卡的更多相关文章
- jQuery制作弹出窗（模态框）
来源:(二少)在南极 ##index.html <!DOCTYPE html><html lang="zh"><head> <meta c ...
- jquery制作论坛或社交网站的每天打卡签到特效
效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...
- 如何使用jQuery 制作全屏幕背景的嵌入视频
实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ...
- jquery制作弹出层带遮罩效果，点击阴影部分层消失
jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...
- 使用 CSS3 & jQuery 制作漂亮的书签动画
今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...
- 使用 CSS & jQuery 制作一款漂亮的多彩时钟
大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...
- jQuery 制作逼真的日历翻转效果的倒计时
在开发中,一些功能需要用到倒计时,例如最常见的活动开始.结束的倒计时.使用最流行的 JavaScript 库来制作这个效果很简单.下面就是一个 jQuery 制作的逼真的日历翻转效果的倒计时功能. 在 ...
- jQuery制作Web全屏效果
需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...
- jquery Tabs选项卡切换
效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
随机推荐
- java内存相关
(类是对象的抽象,而对象是类的具体实例.类是抽象的,不占用内存,而对象是具体的,占用存储空间.) 1.java是如何管理内存的 java的内存管理就是对象的分配和释放问题.(其中包括两部分) 分配:内 ...
- 005-JSX简介以及使用
一.概述 考虑这个变量声明: const element = <h1>Hello, world!</h1>; 标签语法既不是字符串也不是HTML. 它被称为JSX,它是Java ...
- 【网络编程基础】Linux下进程通信方式（共享内存，管道，消息队列，Socket）
在网络课程中,有讲到Socket编程,对于tcp讲解的环节,为了加深理解,自己写了Linux下进程Socket通信,在学习的过程中,又接触到了其它的几种方式.记录一下. 管道通信(匿名,有名) 管道通 ...
- LeetCode：路径总和II【113】
LeetCode:路径总和II[113] 题目描述 给定一个二叉树和一个目标和,找到所有从根节点到叶子节点路径总和等于给定目标和的路径. 说明: 叶子节点是指没有子节点的节点. 示例:给定如下二叉树, ...
- kubernetes1.9 手动安装
一.创建TLS证书和秘钥: 1.安装 CFSSL: wget https://pkg.cfssl.org/R1.2/cfssl_linux-amd64 chmod +x cfssl_linux-amd ...
- 在python中打开文件显示没有权限PermissionError: [Errno 13] Permission denied:
不多说了,我犯了低级错误 ,文件路径搞错了
- 跟着实例学习ZooKeeper的用法： 分布式锁
锁 分布式的锁全局同步, 这意味着任何一个时间点不会有两个客户端都拥有相同的锁. 可重入锁Shared Reentrant Lock 首先我们先看一个全局可重入的锁. Shared意味着锁是全局可见的 ...
- GIT使用—安装配置及工作流程
一.Git 与 SVN 区别 GIT不仅仅是个版本控制系统,它也是个内容管理系统(CMS),工作管理系统等. 1.GIT是分布式的,SVN不是:这是GIT和其它非分布式的版本控制系统,例如SVN,CV ...
- winform webbrowser禁用网页target=blank
/// <summary> /// 屏蔽target=_blank 的弹出窗口 /// </summary> /// <param name="sender&q ...
- 动态背景的CSS3登录表单
在线演示 本地下载