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 ...
随机推荐
- python线程间数据共享(示例演示)
``` import threading data_list = [] def task(arg): data_list.append(arg) print(data_list) def run(): ...
- ionic学习笔记—常用命令
Ionic CLI介绍 Ionic CLI是开发Ionic应用程序过程中使用的主要工具.它就像一个瑞士军刀:它在一个界面下汇集了大量工具. CLI包含许多对Ionic开发至关重要的命令,例如start ...
- [ngClass]、[ngStyle]的基本使用（转载）
1.ngStyle 基本用法 <div [ngStyle]="{'background-color':'green'}"></<div> 判断添加 & ...
- s5_day4作业
# #流程控制练习题: # #==========>基础部分 # #练习一: # if True or False and False: # print('yes') # else: # pri ...
- solr 利用cul或solr界面单值更新
本文主要是指利用solr界面或cul的更新solr的值.如果需要代码中单值更新请参考黎明露珠的博客链接:http://www.cnblogs.com/limingluzhu/p/5535314.htm ...
- UVALive 6915 J - Leveling Ground
思路: 简单模拟下.从左向右扫描一次,求出挖出该区间空地的花费,并取个最小值即可. 至于怎么求区间内的高度最小值,就用线段树就好了. #include <bits/stdc++.h> #d ...
- nohup- Shell后台运行
&方式: Unix/Linux下一般想让某个程序在后台运行,很多都是使用 & 在程序结尾来让程序自动运行.比如我们要运行mysql在后台: /usr/local/my ...
- 1044: [HAOI2008]木棍分割
1044: [HAOI2008]木棍分割 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2161 Solved: 779[Submit][Statu ...
- Linux(CentOS)中常用软件安装，使用及异常——XManager, 中文支持，JDK
XManager图形化界面远程连接 采用Xshell的方式可以不用在CentOS系统中配置即可以相连,主要原理就是SSH连接的方式,但是XManager图形化界面远程连接是需要修改CentOS系统的. ...
- python标准库学习-ftplib
源码: """An FTP client class and some helper functions. Based on RFC 959: File Transfer ...