Jquery选项卡在单击后消失

Jquery选项卡在单击后消失,jquery,Jquery,点击“我们的工作”,然后点击标题1、2、3,选项卡就消失了,与第一个选项卡(链接)使用的脚本相同,工作正常。我做错了什么 完整代码在 问题是您正在隐藏tab元素的所有同级,其中包括subnav元素,因此您需要隐藏当前选项卡的所有其他tab同级 $(函数(){ 变量选项卡=$('.tabs'); tabs.find('a')。on('click',函数(e){ e、 预防默认值(); tabs.find('.active').removeClass('active'); $(this.addCl

点击“我们的工作”,然后点击标题1、2、3,选项卡就消失了,与第一个选项卡(链接)使用的脚本相同,工作正常。我做错了什么

完整代码在


问题是您正在隐藏
tab
元素的所有同级,其中包括
subnav
元素,因此您需要隐藏当前选项卡的所有其他
tab
同级

$(函数(){
变量选项卡=$('.tabs');
tabs.find('a')。on('click',函数(e){
e、 预防默认值();
tabs.find('.active').removeClass('active');
$(this.addClass('active');
$(this.hash).show()同级('.tab').hide();
}).first().click();
//显示菜单
$(“#显示关于btn”)。单击(函数(){
$(“#show about btn”).html(▼;”;
如果($('.menu-nav').css('display')='none'){
$('.menu nav')。向下滑动(“快速”);
}否则{
$('.menu nav').slideUp(“快速”);
$(“#show about btn”).html(▲;”;
};
});
$(“.our work”)。单击(函数(){
if($('.work wrap').css('display')=='none'){
$(“.work wrap”)。向下滑动(“快速”);
}否则{
$(“.work wrap”).slideUp(“fast”);
};
});
});
正文{
背景色:#E5;
}
a:链接{
文字装饰:无!重要;
}
.头衔{
边缘顶部:150px;
字体大小:450%;
字体大小:粗体;
字母间距:3px;
左边距:10px;
边框底部:1px实心#ccc;
}
.标题a,
.标题a:访问,
.标题a:链接{
颜色:黑色;
}
.标题a:悬停{
颜色:#2bb673;
}
#关于btn的节目{
字体大小:40%;
左边距:10px;
颜色:#2bb673;
}
/*航行*/
.subnav{
最小高度:40px;
边框底部:1px实心#ccc;
}
李素娜先生{
列表样式:无;
浮动:左;
填充:0px 40px 1px 1px;
位置:相对位置;
底部:15px;
}
.subnav ul li a.active{
填充:6px;
背景色:#2bb673;
颜色:#fff;
-webkit边界半径:20px;
-moz边界半径:20px;
-o-边界半径:20px;
边界半径:20px;
文字装饰:无;
}
李亚娜先生{
颜色:#2bb673;
字号:600;
字体大小:12px;
文本转换:大写;
位置:相对位置;
右:30px;
顶部:15px;
}
.a:悬停{
颜色:黑色;
-webkit过渡:所有.3s易用;
-moz过渡:所有.3秒都很轻松;
-o型过渡:所有。3秒容易进入;
过渡:所有.3s都很轻松;
}
文章{
字体大小:16px;
字体系列:arial,无衬线;
边框底部:1px实心#ccc;
}
.标签{
位置:相对位置;
顶部:10px;
字体大小:12px;
显示:块;
}
.菜单导航{
显示:无;
}
.表p,
h5{
垫底:25px;
}
.表h4{
边缘顶部:5px;
字体大小:粗体;
}
.表h5{
字号:18px;
}
.tab img{
左边距:50像素;
边缘底部:10px;
}
/*内容*/
.我们的工作{
字体系列:“识字斜体”;
字体:斜体;
字体大小:400;
字体大小:46px;
边缘顶部:5px;
颜色:黑色;
}
.我们的工作{
边框底部:1px实心#ccc;
}
.我们的工作a:积极{
颜色:#2bb673;
文字装饰:无;
}
.我们的工作a:悬停{
颜色:#2bb673;
文字装饰:无;
}
.我们的工作a:重点{
颜色:#2bb673;
文字装饰:无;
}
.工作包装{
显示:无;
}
#缩略图{
光标:指针;
}
#缩略图:悬停{
-webkit过滤器:灰度(70%);
-mozkit过滤器:灰度(70%);
滤镜:灰度(70%);
}
.表2 h3{
文本对齐:居中;
}
.表2{
边缘顶部:20px;
}

标题1 Lorem ipsum dolor sit amet,奉献精英。你是否愿意让你的发明者不受时间的限制

标题 Lorem ipsum dolor sit amet,奉献精英。你是否愿意让你的发明者不受时间的限制

标题 Lorem ipsum dolor sit amet,奉献精英。你是否愿意让你的发明者不受时间的限制

标题 Lorem ipsum dolor sit amet,奉献精英。你是否愿意让你的发明者不受时间的限制

标题 Lorem ipsum dolor sit amet,奉献精英。你是否愿意让你的发明者不受时间的限制

标题 Lorem ipsum dolor sit amet,奉献精英。你是否愿意让你的发明者不受时间的限制

标题 Lorem ipsum dolor sit amet,奉献精英。你是否愿意让你的发明者不受时间的限制

$(function() {

var tabs = $('.tabs');


tabs.find('a').on('click', function(e) {
    e.preventDefault();
    tabs.find('.active').removeClass('active');
    $(this).addClass('active');
    $(this.hash).show().siblings().hide();
}).first().click();





//Show Menu
$('#show-about-btn').click(function() {
    $('#show-about-btn').html("▼");
    if($('.menu-nav').css('display')=='none') {
        $('.menu-nav').slideDown("fast");
    } else {
        $('.menu-nav').slideUp("fast");
        $('#show-about-btn').html("▲");
    };
});

$(".our-work").click(function() {
    if($('.work-wrap').css('display')=='none') {
        $(".work-wrap").slideDown("fast");
    } else {
        $(".work-wrap").slideUp("fast");
    };
});

});