<style type="text/css">
.menu{
position:relative;
float:left;
padding:0px;
}
ul{
list-style:none outside none;
padding-left :2px;
padding-bottom:0px;
margin-bottom:0px;
color: #999;
background-color:rgb(204, 204, 204);
height:30px;
width:200px;
}
.menu li {
float:left;
padding:5px;
margin:2px;
font: Verdana,Arial,sans-serif 20px 22px;
}
ul li a {
text-decoration:none;
font-weight:bold;
}
.menu .content{
padding:0.5em;
border:#CCC solid 1px;
margin-top:0px;
}
.on{
background-color:#FFF;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li class="on"><a href="#" id="tab1">tab1</a></li>
<li ><a href="#" id="tab2">tab1</a></li>
<li><a href="#" id="tab3">tab1</a></li>
</ul>
<div id="tab11" class="content" style="display::block">
kkkkkkkkkkkkkkkkkkkkkkkkkkkk
2222222222222222222233333333
111111111111111111111111111111
</div>
<div id="tab21" class="content" style="display:none">eeeeeeeeeeeee</div>
<div id="tab31" class="content" style="display:none">rrrrrrrrrrr</div>
</div>
</body>
<script src="../../jquery-1.7.2.js"></script>
<script language="javascript">
$(function(){
var tabs = $('.menu').find('a');
$.each(tabs,function(i){
$(this).click(function(){
//隐藏内容
$('.menu').find('.content').hide();
//显示当前内容
var contentid = $(this).attr('id') +""+'1';
$('#'+contentid).show();
//移除当前 选择状态
$('.menu ul li').removeClass('on');
//选中当前 选择状态
$(this).parent().addClass('on');
});
});
});
</script>
</html>
这里是自己作为记录用。
分享到：
相关推荐
- **维护成本**：CSS+Div的方法在维护上更简单，只需要修改CSS代码，而图片制作的TAB则可能需要重新设计和切图。 总结来说，CSS+Div制作TAB是网页设计中常用且推荐的方法，它提供了更好的可定制性、性能和可访问性...
这种效果现在在PC端、移动设备端已经很常见了，这一个代码开源，制作方法简单，效果简洁，手轻触对应的TAb，显示的内容对应切换。 你可以学习下在Android开发中，tablelayout 与viewpager如何关联，如何创建每个...
本文将深入探讨如何实现“tab标签图片渐隐渐现效果”，这是一种提升网页视觉吸引力和交互性的技巧。 首先，我们需要理解基本的HTML结构。在实现tab标签时，通常会创建一个包含多个li元素的ul列表，每个li元素对应一...
总结来说，创建自定义的滑块Tab效果的`UISegmentedControl`涉及了Swift编程中的面向对象设计、图形绘制、触摸事件处理、动画制作以及布局管理等多个方面。这是一个很好的练习，可以帮助开发者提升iOS应用的界面设计...
以下是一个简单的实现步骤： 1. **HTML结构**：首先，创建Tab按钮和内容区域的HTML结构。通常，我们将Tab按钮设置为链接（`<a>`标签）或者按钮（`<button>`标签），内容区域使用`<div>`标签，并设置初始状态下所有...
【标题】：“jQuery实现的简易Tab菜单实例” 这个标题揭示了一个使用JavaScript库jQuery创建的Tab菜单实例。Tab菜单是一种常见的用户界面元素，它允许用户在不同的内容区域之间切换，每个区域对应一个标签页。这种...
本文将深入探讨如何使用CSS来制作Tab菜单样式，并基于提供的标签“源码”和“工具”，分享一些实用的代码示例和技巧。 首先，让我们理解Tab菜单的基本结构。一个典型的Tab菜单由两部分组成：Tab按钮（通常是静态...
在网页设计和开发中，jQuery 是一款非常...总的来说，jQuery提供了一套简单而强大的API，使得实现各种选项卡切换效果变得轻松。通过理解和实践这些基本原理，开发者可以根据实际需求定制出丰富多样的选项卡交互设计。
### Tab选项卡制作知识点 #### 一、Tab选项卡概述 在现代网页设计中，Tab选项卡是一种常见的交互模式，它允许用户通过点击不同的标签来切换显示不同的内容区域。这种设计不仅美观，而且能有效利用有限的空间展示更...
本篇文章将重点解析三种简洁经典且高效的`DIV+CSS`制作的Tab导航的实现方法。 一、静态Tab导航 静态Tab导航是最基础的实现方式，通常通过CSS的`display`属性来切换不同Tab的内容显示。在HTML结构中，我们可以创建...
本文将深入探讨“简单好看的tab制作代码”这一主题，旨在帮助开发者理解和实现这种功能。 首先，让我们理解Tab导航的基本概念。Tab导航通常由一组可点击的标签组成，每个标签对应一个独立的内容区域。当用户点击...
这个简单的jQuery Tab插件就是这样工作的。虽然只有6行代码，但它已经足够应对许多基本需求。然而，对于更复杂的应用场景，如动态加载内容、添加动画效果或支持触发动画，可能需要扩展此基础代码。例如，可以添加...
本篇文章将详细探讨标题为“jquery tab 的几个插件”的主题，介绍其中包含的三个jQuery Tab插件，以及它们如何帮助开发者实现功能完善的Tab效果。 1. **jQuery UI Tabs** jQuery UI 是一个官方的jQuery扩展库，...
这个压缩包“基于jQuery的简单的tab标签栏切换效果的实现代码.zip”提供了使用JavaScript库jQuery来创建这种效果的示例代码。jQuery是一个强大的JavaScript库，简化了DOM操作、事件处理和动画制作等任务，因此它是...
"jQuery简洁版tab标签"是一个利用jQuery库实现的简单、可定制化的Tab组件。这个组件的核心在于利用jQuery的事件处理和DOM操作功能，以实现高效且流畅的切换效果，尤其是当主要内容区域需要支持左右滚动时。 jQuery...
下面我们将深入探讨这个主题，讲解如何实现纯JavaScript的Tab切换效果。 首先，我们需要理解HTML结构。一个基本的Tab切换系统通常包含一组Tab按钮和对应的Tab内容区域。Tab按钮和内容区域可以通过CSS类名来关联，...
以下是一个简单的例子： ```javascript // 打开一个新的窗口或标签页 var newTab = window.open("https://example.com", "newTab"); // 在需要的时候关闭新打开的标签页 if (newTab && !newTab.closed) { newTab....
在实际应用中，我们还需要考虑一些其他因素，如Tab的动画效果、响应式设计以适应不同设备，以及可能存在的 Accessibility（无障碍访问）问题。总的来说，jQuery提供了一个强大的工具集，使得创建简洁的Tab标签变得...
3. **可复用性**：作为Vue组件，LyTab可以方便地在项目中复用，只需要简单配置就能快速集成到你的应用中，减少开发时间和提高代码复用率。 4. **高度定制**：LyTab允许开发者根据项目需求自定义样式和行为，如改变...
一个简单的Tab组件通常包含一个容器元素，用于包裹所有的Tab选项和内容区域。每个Tab选项是一个链接（`<a>`标签），而对应的内容则放在`<div>`或其他块级元素中，并通过CSS隐藏大部分内容，只显示当前选中的Tab内容...