<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.5.1.min.js">
</script>
<script type="text/javascript" >
$(function(){
alert('hello world');
$('#tab-title a').click(function(){
$(this).addClass("selected");
$(this).siblings().removeClass();
var u = this.href.split('#')[1];
$('#'+u).removeClass();
$('#'+u).siblings().addClass('hide');
})})
</script>
<style type="text/css">
#tab{width:250px;
margin:10px auto;
border:1px solid #ccf;
overflow:hidden;}
#tab-title h3{color:#666;font-size:15px;font-weight:400;}
#tab-title .selected {color:#356aa0;border-bottom:0px;}
#tab-title a{
padding:5px 9px 5px 10px;
border:1px solid #ccf;
margin-left:-5px;
text-decoration:none;
}
#tab-content .hide{display:none;}
#tab-content ul{padding:5px 10px;overflow:hidden;}
#tab-content ul li{padding-top:5px;height:20px;}
</style>
</head>
<div id="tab">
<div id="tab-title">
<h3><a class="selected" href="#tab1">最新评论</a>
<a href="#tab2">近期热评</a>
<a href="#tab2">随机文章</a></h3>
</div>
<div id="tab-content">
<ul id="tab1"><li>test1</li><li>test1</li><li>test1</li></ul>
<ul id="tab2" class="hide"><li>test2</li><li>test2</li><li>test2</li></ul>
<ul id="tab3" class="hide"><li>test3</li><li>test3</li><li>test3</li></ul>
</div>
</div>
分享到：
相关推荐
一个Tab选项卡通常由两部分组成：选项卡导航（包含了各个选项卡的标题）和内容区域（每个选项卡对应的内容）。HTML代码可以这样编写： ```html <div class="tab-nav"> <button class="tab active" data-tab="tab1...
在jQuery扁平水平滑动Tab选项卡中，这种设计体现在平滑的过渡效果和简单的视觉元素上。 ### 水平滑动特效 这种特效通过jQuery的动画功能实现，当用户点击Tab时，内容区域会水平滑动以显示对应的内容。这种平滑的...
本压缩包"jQuery多个tab切换选项卡代码.zip"提供了一个实现多选项卡切换的示例，适用于那些想要在自己的网站上增加动态、互动选项卡功能的开发者。 首先，让我们深入理解jQuery选项卡的基本原理。jQuery选项卡通常...
本文将深入探讨基于jQuery实现的选项卡组件，特别是“基于jQuery的tab选项卡完美改进版”，它支持在同一web页面上显示多个选项卡。 首先，jQuery是一个轻量级、功能丰富的JavaScript库，它简化了DOM操作、事件处理...
"jQuery手机端网页tab选项卡代码"就是一个针对这种情况而设计的解决方案。它主要用于创建一种类似于团购应用中的功能，用户可以通过点击不同的选项卡查看优惠券的状态，如未使用、已使用或已过期。 jQuery是一款...
总结一下，这个“jQuery选项卡”示例展示了如何使用jQuery轻松创建动态选项卡，包括事件处理、DOM操作和简单的CSS样式切换。通过学习这个例子，开发者可以更好地掌握jQuery在构建交互式用户界面中的应用，同时也能...
本资源"Jquery -tab简易选项卡"提供了一种简单的方法，利用JavaScript库jQuery实现这种功能。jQuery是一个轻量级、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果和Ajax交互。 首先，我们需要...
本示例“jQuery手机端网页tab选项卡代码”旨在帮助开发者实现类似团购APP中展示未使用、已使用、已过期优惠券信息的功能。下面我们将详细探讨这个项目的相关知识点。 首先，Tab选项卡是一种页面布局方式，它将大量...
总结来说，这个jQuery Tab插件提供了一套全面的选项卡解决方案，具备丰富的交互功能和高度的自定义能力，对于创建现代、互动性强的网页界面非常有帮助。无论是个人开发者还是专业团队，都能从中受益，提升项目的质量...
总之，"78种jQuery特效之TAB选项卡"是一个宝贵的资源，为开发者提供了丰富的选项卡实现方式，帮助他们提升网页的交互性和吸引力。无论是初学者还是经验丰富的开发者，都可以从中学习到如何有效地利用jQuery来创建...
代码简介：jQuery叶子Tab选项卡是一款基于CSS3 jQuery实现的动态滑动展示的选项卡Tab效果，选项卡在切换过程中带有动态滑动效果，选项卡内可以防止图片、文本或者图文混排内容。
本案例的"jQuery行业案例tab选项卡布局代码.zip"提供了一个使用jQuery实现的Tab选项卡布局的实例，这在网页设计中非常常见，常用于展示分组内容或节省页面空间。 Tab选项卡布局是一种用户界面设计模式，它允许用户...
在本文中，我们将深入探讨如何使用jQuery和Bootstrap框架来实现自定义的添加和删除选项卡功能。Bootstrap是一款流行的前端开发工具，它提供了丰富的组件和样式，使得构建响应式和交互式的用户界面变得简单。而jQuery...
"jQuery tab选项卡"是jQuery库中一个常用的功能，用于创建美观且易于使用的页面导航。本篇文章将深入探讨jQuery选项卡、AJAX选项卡以及静态选项卡的实现方式，同时关注鼠标点击事件在这些选项卡中的应用。 一、...
本资源“jQuery tab选项卡切换和新闻资讯列表布局代码”提供了使用jQuery实现的选项卡切换功能以及新闻资讯列表的布局示例，这对于前端开发者来说是一个非常实用的学习和参考材料。 选项卡切换是网页设计中常见的...
在这个“JQuery Tab_JQuery竖排选项卡代码示例”中，我们将探讨如何利用JQuery 1.4.4实现垂直排列的选项卡功能。 首先，让我们了解JQuery的基本用法。JQuery通过$函数作为入口，允许开发者选择HTML元素并对其进行...
"简单的jquery tab选项卡切换代码样式"是指利用jQuery实现的一种常见用户界面元素——选项卡（Tab）的交互功能。选项卡是网页设计中常用的布局方式，它可以有效地组织和展示大量内容，提高用户体验。下面我们将详细...
特别是对于初学者，它提供了简单易懂的API，可以快速实现复杂的交互效果，如Tab选项卡。 首先，让我们了解Tab选项卡的基本概念。Tab选项卡是一种用户界面设计模式，用于将大量内容分组到不同的标签页下，以便用户能...
HTML+CSS+Jquery实现的tab选项卡特效案例，可以学习一下。导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。这是tab选项卡切换的源代码，...
本项目涉及的主题是“jQuery Tab选项卡且可关闭”，这是一个常见的UI组件，用于组织和展示页面上的多部分内容。下面我们将深入探讨这个功能的实现、原理以及相关的jQuery和HTML/CSS知识。 首先，jQuery Tab选项卡的...