jQuery 显示与隐藏 tab选项卡

方法一：使用display样式：block、none来控制文本的显示与隐藏

<div class="explain_text">

移动互联网为企业提供了连接用户的新方式......

</div>

<div class="show_text" style="display:none;">

移动互联网为企业提供了连接用户的新方式......

</div>

<div class="display_all"><span>展示全部</span><img src="{/$s_path/}/school/images/playicon.png" alt="下拉展示"></div>

 

var textHeight = document.getElementById("explain_text").scrollHeight;
if (textHeight < 182) {
$(".display_all").css("display", "none");
} else {
$(".display_all").css("display", "block");
}
// 点击显示所有文本内容
$(".display_all").on('click',function () {
if ($(".explain_text").css("overflow") == "hidden") {
$(".display_all span").text("收起");
$(".explain_text").css("height", "100%");
$(".explain_text").css("overflow", "visible");
$(".display_all img").attr("src", "http://cdn.jisuapp.cn/matrix_static/school/images/close.png");
} else {
$(".display_all span").text("展示全部");
$(".explain_text").css("height", "150px");
$(".explain_text").css("overflow", "hidden");
$(".display_all img").attr("src", "http://cdn.jisuapp.cn/matrix_static/school/images/open.png");
}
});

方法二：tab选项卡实现

$(this).addClass('active').siblings().removeClass('active');
var id=$(this).attr('data-id');
$('.support_wrap_sick:nth-child('+id+')').show().siblings().hide();
})

转载于:https://www.cnblogs.com/prospective-zkq/p/10069573.html