jQuery选项卡

原创 2012年03月28日 15:15:48
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>模拟Tabs效果</title>
		<link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css">
		
		<script type="text/javascript" language="JavaScript" src="./js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" language="JavaScript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
		
		
		<script type="text/javascript" language="JavaScript">		
			
			$(function(){
				
				$("#tabs").tabs({
					
					event:"mousemove",
					fx:{ opacity: 'toggle'},
					
					selected:0
									
				});			
				
			});
			
		</script>
		
		
	</head>
	<body>
		
		<h1>模拟tabs效果</h1>
		
		<div id="tabs">
			<ul>
				<LI><a href="#tab-1">面板1</a></LI>
				<LI><a href="#tab-2">面板2</a></LI>
				<LI><a href="#tab-3">面板3</a></LI>
				<!--ajax处理数据-->
				<LI><a href="#tab-4">面板4</a></LI>
				
			</ul>
			
			<div id="tab-1">
				新闻:
				<img src="./pic/1.png">
							
			</div>
			
			<div id="tab-2">
				体育新闻:
				<img src="./pic/2.png">
							
			</div>
			
			<div id="tab-3">
				<img src="./pic/3.png">			
				
			</div>				
			
			<div id="tab-4">
				社会新闻:				
				<img src="./pic/4.png">
			</div>				
			
		</div>
		
		
	</body>
</html>


利用jQuery方法实现选项卡的功能

效果如下: html> charset="UTF-8"> *{ margin: 0; padding...
  • fsfasgsfd
  • fsfasgsfd
  • 2016年09月19日 19:51
  • 3308

jQuery写选项卡

$(function(){ let oLi=$('#menu li'); oLi.bind('click',function() { let iIndex=$(this).i...
  • tiny_jiao
  • tiny_jiao
  • 2017年02月22日 13:50
  • 165

jquery实现选项卡切换

jquery 利用 index() 查找下标实现选项卡切换
  • FutureLilian
  • FutureLilian
  • 2017年09月01日 22:35
  • 511

jquery动态增减选项卡

jquery动态增减选项卡
  • love_xiolan
  • love_xiolan
  • 2016年10月12日 11:52
  • 2161

jquery实现简单的选项卡功能

html部分 菜单一 菜单二 菜单三 菜单四 这是菜单一的内容 这是菜单...
  • wm1029218932
  • wm1029218932
  • 2015年09月18日 09:29
  • 730

jQuery多项选项卡的实现

jQuery多项选项卡的实现
  • yanlintao1
  • yanlintao1
  • 2014年06月01日 00:28
  • 1611

jquery通用tab选项卡

效果:悬浮选项卡,会自动切换内容。         1 首先引入jquery库 2 初始化事件 $(function () { tabs('#oa...
  • yaozhiwei1019
  • yaozhiwei1019
  • 2016年11月29日 10:43
  • 1146

tabox 左右滑动选项卡封装jquery插件

/***demo******/ tabBOX左右滑动   body{margin:0;padding:0;}   ul,li{margin:0;padding:0;l...
  • u012764368
  • u012764368
  • 2015年07月01日 09:48
  • 366

jq选项卡的实现原理

.none{display:none;} .tab_menu{width:300px;height:30px;border:1px solid red;} .div{width:60px;heig...
  • u010861514
  • u010861514
  • 2014年11月14日 02:00
  • 1380

Div+CSS+JQuery轻松实现选项卡"选项卡"

body,div,ul{ padding:0; margin:0;}         #container{width:800px; margin:50px;}         .tab{ pad...
  • lyr1985
  • lyr1985
  • 2015年07月23日 10:36
  • 1358
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery选项卡
举报原因:
原因补充:

(最多只允许输入30个字)