Question

我有4个“按钮”，当你点击每个按钮时会出现一段文字，然后在点击下一个按钮时消失。这4个按钮标有.planing，.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>

Jquery的：

// 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;

}）;

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

Answer 1

确保脚本标签中有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>

这是我使用您的代码在codepen中工作的内容，我只添加了那些cdn。

希望这会有所帮助;）

Answer 2

＆＃13;

// step work


$('.filt-step').on('click', function(e) {
  e.preventDefault();
  var $this = $(this);
  var $filter = $this.data('filter');
  //console.log($this.data('filter'));
  $('#step-text .cont').removeClass('active');
  $('#step-text .cont' + $filter).addClass('active');  
});

＆＃13;

#step-text .cont{
display: none;
}

#step-text .cont.active{
display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>-->
<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 active">
            <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>

＆＃13;

我不确定为什么你需要另外一个插件来显示/隐藏基于某些点击事件的几个div。同样，我会避免使用另一个插件和jQuery来完成这么小的任务。这段代码只需几行即可完成相同的任务。

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

2 个答案: