// 导航条切换的点击事件 $(".data-item[data-id]").click(function (e) { if ($(e.currentTarget).hasClass("active")) { return; } $(".active").removeClass("active"); $(e.currentTarget).addClass("active"); var dataId = $(e.currentTarget).attr("data-id"); $(".block-content-active").removeClass("block-content-active"); $(dataId).addClass("block-content-active"); });
<div class="data"> <!-- 导航条标题 --> <div data-id="#content1" class="data-item active float-left"> <span class="block-title">字体样式</span> </div> <div data-id="#content2" class="data-item float-left"> <span class="block-title">染色区域样式</span> </div> <div data-id="#content3" class="data-item float-left"> <span class="block-title">合成图片样式</span> </div> </div>