正文
选项卡jquery,首字下沉在哪个选项卡
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何基于jquery实现最简单的选项卡切换效果
html
head
titletab/title
style
.tab-title p{color:#666;font-size:15px;font-weight:400; }
.tab-title .selected{color:#356aa0;border-bottom:0px;} /*标题被选中时的样式*/
.tab-title span{padding:5px 9px 5px 10px;border:1px solid #ccc;border-right:0px;margin-left:-1px;cursor:pointer;}
.tab-content .hide{display:none;} /*默认让第一块内容显示，其余隐藏*/
.tab-content ul{padding:5px 10px;overflow:hidden;}
.tab-content ul li{padding-top:5px;}
/style
script type="text/javascript" src="js/jquery-3.1.1.min.js"/script
script type="text/javascript"
$(document).ready(function(){
$('.tab-title span').click(function(){
$(this).addClass("selected").siblings().removeClass();//removeClass就是删除当前其他类；只有当前对象有addClass("selected")；siblings()意思就是当前对象的同级元素，removeClass就是删除；
var n=$(this).index();
$(".tab-content ul").hide();
$(".tab-content ul").eq(n).show();
//$(".tab-content ul").hide().eq($('.tab-title span').index(this)).show();
});
});
/script
/head
body
div class="tab-title"
pspan class="selected"最新评论/spanspan近期热评/spanspan随机文章/spanspan新闻资讯/span/p
/div
div class="tab-content"
ulli最新评论/li/ul
ul class="hide"li近期热评/li/ul
ul class="hide"li随机文章/li/ul
ul class="hide"li新闻资讯/li/ul
/div
body
/html
相关问答
Q1: 请问一个jQuery选项卡怎么写啊？
首先如题，你的class必须是一 一对应的，就是说按钮是的class是tab1，那么与之对应的div里面也必须是tab1，如果不符合这点，以下jq代码不会生效，第二点，我给你的ul加了个id，方便选取元素。
html:
jq:
Q2: jquery菜单点击添加选项卡
定义一个div设置display:none，点击菜单时，toggle()；再把选项卡中第一个选项卡的样式变成被选中时候的样式就OK了~
Q3: 关于jquery选项卡
楼主看看行不行
div class="hdo zhedie_div"
script type="text/javascript" src="js/jquery-1.3.2.js"/script
script type="text/javascript" src="js/jquery.easing.1.3_.js"/script
script type="text/javascript" src="js/jquery.hrzAccordion.js"/script
script type="text/javascript" src="js/jquery.hrzAccordion.examples.js"/script
div class="hdo tit_02"h2DIV横向水平左右折叠选项卡/h2a href="/Case.html" title="more"/a/div
ul class="test3"
lidiv class="handle3"img src='images/img01.jpg'/div
h3a href="/about/rongyu"测试荣誉/a/h3
p测试荣誉....../p
/li
lidiv class="handle3"img src='images/img02.jpg'/div
h3a href="/xiaofang"消防工程案例展示二/a/h3
p消防工程案例展示消防工程案例展示消防工程案例展示消防工程案例展示消防工......../p
/li
lidiv class="handle3"img src='images/img03.jpg'/div
h3a href="/shizheng"市政工程案例展示二/a/h3
p市政工程案例展示二....../p
/li
/uldiv style="clear:both;"/div
/div
Q4: jquery的ui插件中的选项卡功能有什么好处？防止页面刷新，加快速度？
在页面不刷新的情况下，可以看其他tab选项卡的内容，缺点就是初始加载的时候需要的资源较多，开始稍慢一点
Q5: 基于jquery实现最简单的选项卡切换效果
这个功能在现在的网站中使用较为普遍，就是以选项卡的形式来对一些内容做了分类。，比如下面的天猫商城。
下面的源码是仿照天猫写的一个选项卡，实现起来的效果如下。
主要是利用我们在点击相应板块是触发它的单击事件，在单击事件中再对内容显示框(tabbox)进行相应项的显示和隐藏操作。
同时利用hover为其添加了鼠标滑过时的效果。
代码：
!DOCTYPE
html
html
lang="en"
xmlns=""
head
meta
charset="utf-8"
/
link
href="css/style1.css"
rel="stylesheet"
type="text/css"
/
script
src="jquery-1.3.2.min.js"/script
title/title
script
$(function
()
{
var
$div_li
=
$("div.tab_menu
ul
li");
$div_li.click(function
()
{
//定义了tan_menu对应的单击事件，也就是类别的单击事件。
$(this).addClass("selected")
.siblings().removeClass("selected");
var
index
=
$div_li.index(this);
$("div.tab_boxdiv").eq(index).show()
.siblings().hide();
}).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
以上就是本文的全部内容，希望对大家熟练掌握实现选项卡切换的技巧有所帮助。
