style.css
*{ margin:0; padding:0;}
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
.tab { width:240px;margin:50px;}
.tab_menu { clear:both;}
.tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
.tab_menu li.hover { background:#DFDFDF;}
.tab_menu li.selected { color:#FFF; background:#6D84B4;}
.tab_box { clear:both; border:1px solid #898989; height:100px;}
.hide{display:none}
demo.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript" >
//<![CDATA[
$(function(){
var $div_li =$("div.tab_menu ul li");
$div_li.click(function(){
$(this).addClass("selected") //当前<li>元素高亮
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮
var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
$("div.tab_box > div") //选取子节点。不选取子节点的话，会引起错误。如果里面还有div
.eq(index).show() //显示 <li>元素对应的<div>元素
.siblings().hide(); //隐藏其它几个同辈的<div>元素
}).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
})
})
//]]>
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div>时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
</div>
</div>
</body>
</html>
效果图：
相关推荐
《360音乐歌手切换jQ选项卡》是一款基于jQuery技术实现的网页特效，主要应用于音乐网站或综合性网站，提供了一种优雅的方式来展示歌手切换功能，增强了用户体验。该选项卡设计简洁，操作流畅，能够方便地展示不同...
本示例“jQuery选项卡”旨在演示如何利用jQuery实现动态切换的选项卡功能，提供多样的皮肤选择，使得用户界面更加友好且互动性强。 选项卡组件是Web界面设计中的常见元素，用于组织和展示大量信息。它通过将相关...
"jQ选项卡向上弹出焦点图 jQuery选项卡向上弹出焦点图网页特效"是一个专门针对这一目标设计的JavaScript库，它结合了jQuery、CSS和HTML5技术，以实现一种独特的用户体验。这个特效使选项卡在用户交互时能够向上弹出...
标题 "JQ 最少代码实现选项卡切换" 涉及到的是使用 jQuery（简称 JQ）库来创建一个简洁的选项卡切换效果。在网页设计中，选项卡是一种常见的用户界面元素，它允许用户在有限的空间内查看多个相关的但不同时显示的...
用jq写的简单选项卡
这个项目旨在实现一种类似于360音乐平台的歌手切换功能，用户可以通过选项卡轻松浏览不同的歌手及其音乐。下面我们将深入探讨这个项目中的关键知识点。 首先，HTML5是构建网页的基础，它提供了更多的语义化标签，如...
本示例中的"jq实现选项卡 jq简单选项卡效果demo下载.zip"提供了使用jQuery实现选项卡效果的代码和示例。 在`jQuery`中实现选项卡效果主要涉及以下几个步骤： 1. **HTML结构**：首先，我们需要设置HTML结构来表示...
在网页设计中，选项卡（Tab）是一种常见的用户界面元素，用于组织和展示大量内容，让用户可以方便地在不同部分之间切换。本示例中，我们关注的是一个使用jQuery库实现的多选项卡切换功能，这在现代网页开发中非常...
在本文中，我们将深入探讨如何使用jQuery来实现一个选项卡上下滚动切换的图片异步加载功能，这在网页设计中是一种常见的交互效果。首先，让我们理解这个特效的主要组成部分：选项卡、滚动按钮、图片异步加载和用户...
首先非常感谢网友Ivin的无私分享，这是他分享到JquerySchool网站上的第一个作品，是用jquery仿京东滑动选项卡特效，他在做项目的过程中用到了这种特效，跟以往分享的选择卡特效有点不一样，它是带游标在菜单下面滑动...
本示例“jQuery选项卡切换带图片列表滚动代码”着重于利用jQuery实现一个功能丰富的用户界面组件，该组件结合了选项卡切换与图片列表的自动滚动效果。这个功能在很多网站中都很常见，比如产品展示、新闻资讯或用户...
代码简介：jQuery叶子Tab选项卡是一款基于CSS3 jQuery实现的动态滑动展示的选项卡Tab效果，选项卡在切换过程中带有动态滑动效果，选项卡内可以防止图片、文本或者图文混排内容。
本压缩包中的“jq多个选项卡标签切换代码”提供了使用 jQuery 创建多组选项卡的示例代码，旨在帮助开发者理解和应用这种交互式设计。 在jQuery中实现选项卡切换主要涉及以下步骤： 1. **HTML结构**：首先，我们...
在“JQ向上滑动切换Tab选项卡”中，上一个选项卡可能逐渐淡出，而新的选项卡则从下方滑入视图。 为了确保在IE6等老版本浏览器中的兼容性，开发者可能使用了jQuery的特性检测和渐进增强策略。这可能涉及到使用jQuery...
在网页设计中，jQuery库被广泛使用来实现各种交互效果，包括动态的、大气的菜单和选项卡切换。本资源“jquery大气的图标菜单tab选项卡切换效果代码.zip”提供了一个利用jQuery实现的视觉效果出色的菜单和选项卡切换...
本资源“jQuery鼠标经过选项卡内容切换代码”提供了一种实用的方法，通过鼠标悬停在选项卡上，实现内容区域的动态切换，为用户带来更直观和便捷的浏览体验。 首先，我们要理解这个代码的核心功能。选项卡是一种常见...
Query大气图标选项卡切换特效插件是一款jQuery Tab选项卡代码。 JS代码 [removed] $（函数（）{ var tabNum = $（“。important”）。find（“li”）; var contentNum = $（“。contents”...
会自动播放样子也很经典的jquery选项卡 用户jQuery 入门的好例子