使用jquery點擊按鈕來激活/停用文本

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

// 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'); 
 
});

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

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

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

我不知道爲什麼你需要一些其他插件，只是爲了顯示/隱藏數的div基於某些點擊事件。再次，我會避免使用一些另外的插件和jQuery一起做這樣的小任務。這段代碼只是執行相同任務的幾行代碼。