`
peter潘
  • 浏览: 10622 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

选项卡tab实现2

阅读更多
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<script src="jquery.js"></script>
<style>	
	:hover{} /*for ie7*/
	html,body,ul,li{
		margin:0;
		padding:0px;
	}
	ul,li{
		list-style:none;
	}
	#wrap{
		margin:10px;		
		width:500px;		
		border:1px solid rgb(108, 146, 173);
	}
	#wrap .tab{
		height:29px;
		background-color:rgb(234, 240, 253);
	}
	#wrap .tab li{
		float:left;		
	}
	#wrap .tab li a{
		display:inline-block;
		font-weight:bold;
		color:rgb(0, 85, 144);
		height:30px;
		line-height:30px;
		padding:0px 20px;
		border-right:1px solid rgb(108, 146, 173);
		cursor:pointer;
	}	
	#wrap .tab li a:hover{
		background-color:orange;
	}
	#wrap .tab li a.selected{
		background-color:white;
	}
	#wrap .content{
		padding:10px;	
		border-top:1px solid rgb(108, 146, 173);	
	}
	#wrap .content > div{
		height:200px;
		display:none;
	}
	#wrap .content > div.selected{
		display:block;
	}
</style>
<script>
	$(function(){
		$('#wrap').delegate('.tab li','click',function(){
			var $self=$(this);
			//设置tab
			$self.siblings().find('a').removeClass('selected');
			$self.find('a').addClass('selected');
			//设置content
			var $contents=$('#wrap .content > div');
			$contents.removeClass('selected');
			$contents.eq($self.index()).addClass('selected');
		});
	});
</script>
</head>
<body>

	<div id="wrap">
		<ul class="tab">
			<li><a class="selected">tab1</a></li>
			<li><a>tab2</a></li>
			<li><a>tab3</a></li>
			<li><a>tab4</a></li>
		</ul>
		<div class="content">
			<div class="selected">content1</div>
			<div>content2</div>
			<div>content3</div>
			<div>content4</div>
		</div>		
	</div>
	
</body>
</html>
分享到:
评论

相关推荐

    html tab选项卡实现

    &lt;li&gt;&lt;a href="#tab2"&gt;选项卡2&lt;/a&gt;&lt;/li&gt; &lt;!-- 更多选项卡标题... --&gt; &lt;div class="tab-content"&gt; &lt;div id="tab1" class="tab active"&gt;内容1 &lt;div id="tab2" class="tab"&gt;内容2 &lt;!-- 更多内容面板... --&gt; `...

    HTML实现Tab选项卡(自动+手动)

    &lt;li&gt;&lt;a href="#tab2"&gt;选项卡2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tab3"&gt;选项卡3&lt;/a&gt;&lt;/li&gt; &lt;div id="tab1" class="tab-content"&gt;内容1 &lt;div id="tab2" class="tab-content"&gt;内容2 &lt;div id="tab3" class="tab-content"&gt;...

    可编辑选项卡TAB

    总结来说,实现“可编辑选项卡TAB”涉及到了前端开发中的多项关键技术,包括Flex布局、DOM操作、事件监听、状态管理和用户交互设计。通过巧妙地结合这些技术,我们可以创建出既美观又实用的动态可编辑选项卡,为用户...

    13个css tab选项卡

    CSS Tab选项卡的实现可以完全不依赖JavaScript,利用`:target`伪类来切换内容的显示。当用户点击某个标签时,对应的ID将会添加到URL的哈希部分,`:target`伪类可以检测这个变化并隐藏其他内容。 3. **响应式设计**...

    tab选项卡 很经典的选项卡

    "Tab选项卡"是这种交互模式的一种实现方式,通常在网页顶部或侧边设置,每个标签代表一个独立的内容区域。本文将深入探讨“经典”的选项卡设计及其重要特性。 一、选项卡的基本结构与功能 1. 标签:每个选项卡都...

    android tab选项卡功能实现

    首先,Tab选项卡的实现通常涉及到`TabHost`、`TabWidget`和`FrameLayout`三个主要组件。`TabHost`是整个Tab布局的容器,`TabWidget`用于显示各个Tab按钮,而`FrameLayout`则用来放置每个Tab下面对应的视图。 1. **...

    漂亮的JSP TAB选项卡

    2. CSS样式:使用CSS来定义选项卡的外观,包括颜色、字体、边框、过渡效果等,以达到美观的效果。 3. JavaScript/jQuery:编写JavaScript代码以实现选项卡的交互功能,如点击切换、内容加载等。 4. JSP语法:了解...

    MFC中使用Tab控件实现选项卡,外加图像控件显示图像

    MFC 中使用 Tab 控件实现选项卡,外加图像控件显示图像 在 MFC 中使用 Tab 控件可以实现选项卡的功能,从而提高用户体验。本文将详细介绍如何在 MFC 中使用 Tab 控件实现选项卡,并在子对话框中使用图像控件显示...

    HTML制作多级菜单_一级下拉菜单导航菜单+二三级选项卡tab-移动到菜单上就切换选项卡.zip

    这个压缩包“HTML制作多级菜单_一级下拉菜单导航菜单+二三级选项卡tab-移动到菜单上就切换选项卡.zip”显然是为了演示如何实现这样的功能。下面将详细解释其中涉及的主要知识点。 首先,我们关注的是HTML...

    TAB选项卡后台菜单效果

    实现"TAB选项卡后台菜单效果"通常涉及以下技术: 1. HTML结构:首先,我们需要创建一个包含各个选项卡的HTML结构。每个选项卡通常是一个`&lt;li&gt;`元素,而整个选项卡组则包裹在`&lt;ul&gt;`或`&lt;nav&gt;`标签中。每个选项卡链接...

    layui Tab选项卡切换跟随特效(源码)

    2. CSS样式:layui框架提供了一套完整的CSS样式表,用于美化Tab选项卡的外观。这包括颜色、字体、边框、背景等视觉效果。开发者可以通过自定义CSS类或者修改layui的默认样式来自定义选项卡样式。 3. JavaScript交互...

    不规则TAB选项卡JS代码

    不规则TAB选项卡JS代码是指使用JavaScript实现的一种具有独特设计风格的选项卡功能。JavaScript是网页开发中的重要脚本语言,它允许我们动态更新内容、响应用户交互并实现复杂的网页逻辑。 不规则TAB选项卡的设计...

    js实现网页tab选项卡切换效果

    &lt;li&gt;&lt;a href="#" data-target="tab2"&gt;选项卡2&lt;/a&gt;&lt;/li&gt; ... &lt;div id="tab1" class="tab-content"&gt;... &lt;div id="tab2" class="tab-content"&gt;... ... ``` 2. **CSS样式**: 使用CSS来美化选项卡,包括设置...

    选项卡(tab)js+css

    在网页设计中,选项卡(Tab)是一种常见的用户界面元素,用于组织和展示大量相关但不同时显示的信息。通过使用JavaScript和CSS,我们可以创建交互性强、视觉效果良好的选项卡组件。下面将详细介绍如何利用这两种技术...

    jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等功能

    在网页设计中,选项卡(Tab)是一种常见的用户界面元素,用于组织和展示大量信息。jQuery Tab 插件就是一种轻量级的解决方案,能够帮助开发者轻松实现多种交互功能,如鼠标滑过、点击切换、自动切换以及数据回调。本...

    形状不规则的tab标签选项卡代码

    3. JavaScript/jQuery文件:这个文件实现了选项卡的交互逻辑,例如监听用户的点击事件,动态显示或隐藏相应的内容区域,同时更新Tab的视觉反馈,比如改变选中Tab的背景色或添加边框等。 学习这个代码示例,你可以...

    选项卡tab标签样式qq在线客服代码

    本文将深入探讨“选项卡tab标签样式”在QQ在线客服代码中的应用,帮助你理解如何创建一个既实用又美观的在线客服系统。 选项卡(Tab)是一种常见的用户界面组件,它允许用户在多个视图之间切换,而无需打开新的窗口...

    css+div漂亮的圆角tab选项卡

    此外,为了实现选项卡的选中状态,我们可以使用伪类选择器,如`:hover`、`:active`和`:focus`来改变选中tab的样式。同时,可以使用`:target`伪类来控制内容区域的显示与隐藏,例如: ```css .content { display: ...

    安卓FragmentTab选项卡相关-TabLayout实现选项卡功能.zip

    2. **创建Fragment**:为每个选项卡创建一个`Fragment`子类,并实现相应的UI和逻辑。每个`Fragment`都应该有与之关联的布局文件。 3. **设置ViewPager**:创建一个`ViewPager`实例,用它来管理各个`Fragment`的滑动...

    CSS+JS实现的圆角边框TAB选项卡滑动门代码

    2. **CSS选择器与盒模型**:为了实现TAB选项卡的效果,我们需要对不同的状态(如选中、未选中)应用不同的样式。这需要用到CSS选择器,如类选择器`.active`,以及理解盒模型(包括`padding`、`border`和`margin`)以...

Global site tag (gtag.js) - Google Analytics