基于jquery写的简单tab效果

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/网页特效" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<title>简单的tab效果</title>
<style type="text/css教程">
* {
	padding: 0px;
	margin:0px
}
body {
	text-align: center
}
.wrap ul {
	overflow: hidden
}
.wrap li {
	float: left;
	list-style: none;
	margin-right: 10px;
	cursor: pointer;
	padding: 2px 5px
}
.link {
	cursor: pointer;
	color: #F00
}
.wrap {
	width: 200px;
	margin: 50px auto
}
.wrap, .ellips教程is {
	font-size: 12px;
	width: 200px;
}
.tab_div div {
	display: none;
	padding: 10px;
}
.tab_div {
	text-align: left;
	border: 1px #CCC solid;
	height: 200px;
	clear: both
}
.cur {
	background: #060;
	color: #FFF
}
#setTab_2{
	margin-top: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
	//tab
		$("#setTab").setTab();
		$("#setTab_2").setTab();
});

/*插件代码*/
(function ($) {
    $.fn.setTab = function () {
		var getTab=$(this),//this指向调用函数的ID
			panels = getTab.children("div.tab_div").children("div"),
			tabs = getTab.find("li");

		return this.each(function(){
			$(tabs).click(function(e) {
				var index = $.inArray(this, $(this).parent().find("li"));//this指向li
				if (panels.eq(index)[0]) {
					$(tabs).removeClass("cur");
					$(this).addClass("cur");
					panels.css("display", "none").eq(index).css("display", "block");
				}
			});

		});
  }
})(jQuery);

</script>
</head>
<body class="wrap">
<div id="setTab">
  <ul class="tab_nav">
    <li class="cur">国事</li>
    <li>军情</li>
    <li>图片</li>
  </ul>
  <div class="tab_div">
    <div style="display: block">国事</div>
    <div>军情</div>
    <div>图片</div>
  </div>
</div>
<div id="setTab_2">
  <ul class="tab_nav">
    <li>国事</li>
    <li class="cur">军情</li>
    <li>图片</li>
  </ul>
  <div class="tab_div">
    <div>国事</div>
    <div style="display: block">军情</div>
    <div>图片</div>
  </div>
</div>
</body>
</html>

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索函数
, div
this
jquery 简单tab切换、jquery tab切换效果、简单的jquery分页效果、简单的jquery动画效果、jquery简单效果,以便于您获取更多的相关知识。

时间: 2024-09-26 10:08:59

基于jquery写的简单tab效果的相关文章

基于jquery的手风琴图片展示效果实现方法_jquery

本文实例讲述了基于jquery的手风琴图片展示效果实现方法.分享给大家供大家参考.具体实现方法如下: 代码运行效果如下图所示: index.html页面代码如下: 复制代码 代码如下: <!DOCTYPE html> <html class=''> <head>     <title>一款基于jquery的手风琴图片展示效果demo</title>     <style class="cp-pen-styles">

基于jquery实现的树形菜单效果代码_jquery

本文实例讲述了基于jquery实现的树形菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的树形菜单代码,点击菜单项可以向下滑出对应的二级菜单,效果流畅自然. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tree-style-show-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

基于JQuery的6个Tab选项卡插件_jquery

顺便也找 来了不少优秀的Tab选项卡实例,在这里与大家分享一下.当然,最终我没有用到IdTabs以及如下任何一个实例,我只是很不服气的自己写了个小插件,尚 不完善,就不于此共享了.先来看看老外们出色的基于JQuery的各式Tab选项卡吧:1. jQuery 选项卡界面 / 选项卡结构菜单教程这种 类型的菜单在网页设计与开发中非常著名的.此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单.要非常留心此 演示哟,你一定会喜欢上它的.演示 | 下载 | 介绍 2

基于jQuery实现的菜单切换效果_jquery

这是一个非常流畅的菜单展示效果,应用在亚马逊上,当你上下移动鼠标的时候,二级菜单会非常轻快的切换,没有任何延时,给用户如滑丝般的感觉.这种效果借助于一款jQuery插件menu-aim,本文将结合实例讲解如何实现速度超快的菜单效果. HTML 首先建立主菜单,我们借用电商网站常见的商品分类.其html结构代码如下,其中我们用到了html5的data-submenu-id属性设置,这在插件调用时非常有用. <div class="active"> <ul class=&

基于jQuery图片循环轮播效果

提示:您可以先修改部分代码再运行 jQuery图片循环轮播效果

基于jquery实现最简单的选项卡切换效果_jquery

这个功能在现在的网站中使用较为普遍,就是以选项卡的形式来对一些内容做了分类.,比如下面的天猫商城. 下面的源码是仿照天猫写的一个选项卡,实现起来的效果如下. 主要是利用我们在点击相应板块是触发它的单击事件,在单击事件中再对内容显示框(tabbox)进行相应项的显示和隐藏操作. 同时利用hover为其添加了鼠标滑过时的效果. 代码: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xh

基于JQuery的一个简单的鼠标跟随提示效果_jquery

1.效果如图 2.实现思路 1 鼠标移入标题(这里是<a>标签) 创建一个div,div的内容为鼠标位置的文本 将创建好的div加到文档中 为提示层设置位置 2 鼠标移出标题 移除div 3 当鼠标在标题内移动时 同样添加div效果 3.JQuery实现代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="t

基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )_jquery

第一种方法: 复制代码 代码如下: $(document).ready(function () { $(':input:text:first').focus(); $(':input:enabled').addClass('enterIndex'); // get only input tags with class data-entry textboxes = $('.enterIndex'); // now we check to see which browser is being use

利用JQuery写一个简单的异步分页插件_jquery

写了一个Jquery异步分页插件,拿出来分享一下,有不完善之处请指教. 以用户分页为例,先看一下效果,首先是第一页: 下一页或者点击第二页后: 点击尾页后: 效果还可以吧?来看看具体怎么用,首先后台要有一个Page模型: Page.java: public class Page { /** * 当前页号 */ private int currPageNum = 1; /** * 总记录数 */ private int totalRowSize = 0; /** * 每页记录数 */ privat