导航条切换的点击事件

    // 导航条切换的点击事件
    $(".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>