使用Jquery单击按钮以激活/停用文本

我有4个“按钮”，当你点击每个按钮时，会出现一段文字，然后在点击下一个按钮时消失。这四个按钮分别标有

.planning

、

.concept

、

.construct

、和

。finish

，并带有与之相应的段落名称，以便匹配。我这里有HTML和JQuery代码：

HTML:

<section id="step-page" class="step-page">
     <div class="container">
        <div class="row">

          <div class="col-md-12">
            <div class="text-center">
              <h2>Proccess</h2>
              <p>Text</p>
              <span class="devider-center"></span>
              <div class="space-single"></div>
             </div>
            </div>

            <!-- step menu -->
            <div class="onStep" data-animation="fadeInUp" data-time="300">

            <div class="step-mains ">

            <div class="col-md-3 step-main">
                <div class="step-main">
                    <a class="filt-step active" data-filter=".planing"><span>Phase 1</span></a>
                </div>
            </div>

            <div class="col-md-3 step-main">
                <div class="step-main">
                    <a class="filt-step" data-filter=".concept"><span>Phase 2</span></a>
                </div>
            </div>

            <div class="col-md-3 step-main">
                <div class="step-main">
                    <a class="filt-step" data-filter=".construct"><span>Phase 3</span></a>
                </div>
            </div>

            <div class="col-md-3 step-main">
                <div class="step-main">
                    <a class="filt-step" data-filter=".finish"><span>Phase 4</span></a>
                </div>
            </div>

          </div>
          <!-- step menu end -->

        <!-- step content -->  
  <div id="step-text" class="col-md-12">

         <div class="cont planing">
           <div class="text-center">
           <h2>Phase 1: Identification of Need</h2>
          <p>Paragrah text</p>
             </div>
            </div>

        <div class="cont concept">
          <div class="text-center">
          <h2>Phase 2: Your Submission</h2>
          <p>Paragrah text</p>
             </div>
            </div>

        <div class="cont construct">
           <div class="text-center">
           <h2>Phase 3: Interviews</h2>
          <p>Paragrah text </p>
             </div>
            </div>

        <div class="cont finish">
          <div class="text-center">
           <h3>Phase 4: The Offer</h3>
          <p>Paragrah text</p>
             </div>
            </div>

           </div>
           </div>
           <!-- step content end -->  

        </div>
      </div>
  </section>

// step work
  var $containerstep = $('#step-text');
  $containerstep.isotope({
    itemSelector: '.cont',
    filter: '.planing',
    hiddenStyle: {
  opacity: 0
},
visibleStyle: {
  opacity: 1
}
  });
   $('.filt-step').on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    if ($this.hasClass('active')) {
  return false;
}
var $optionSet = $this.parents();
$optionSet.find('.active').removeClass('active');
$this.addClass('active');

var selector = $(this).attr('data-filter');
$containerstep.isotope({
  filter: selector,
});
return false;

}))

---

我不确定我遗漏了什么，因为所有文本都会立即显示，并且在切换标题时不会激活/消失。

确保脚本标记中有jquery和同位素库

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

这是我对你的代码所做的工作，我只添加了那些cdn

希望这有帮助；）

//步进工作
$（'.filt step'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var$this=$（this）；
var$filter=$this.data（'filter'）；
//console.log（$this.data（'filter'））；
$（'#step text.cont'）.removeClass（'active'）；
$（'#step text.cont'+$filter.addClass（'active'）；
});
#步骤文本。续{
显示：无；
}
#步骤文本。继续激活{
显示：块；
}

过程
正文

第一阶段
第二阶段
第三阶段
第四阶段
第1阶段：确定需求
巴拉圭文本

第二阶段：提交
巴拉圭文本

第三阶段：面试
巴拉圭文本

第四阶段：报价
巴拉圭文本

那么，你的问题是什么？我缺少一些东西，因为切换时按钮不起作用。我在创建JSFIDLE时遇到了一个JS错误：错误：“$containerstep.isotox不是一个函数”你缺少代码/插件吗？看起来这个库在原始问题中被省略了。这对我来说似乎很好。问题是什么？