私は4つの「ボタン」を持っています。それぞれのボタンをクリックすると、テキストの段落が表示され、次のボタンをクリックすると消えます。 4つのボタンには、.planing
、.concept
、.construct
、および.finish
のラベルが付いており、段落に一致するように名前が付けられています。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の:私はここにHTMLと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;
を});
すべてのテキストが一度に表示され、タイトルが切り替えられたときにアクティブ/非表示になるため、私が紛失していることがわかりません。
あなたの質問は何ですか? –
トグル時にボタンが機能しないために欠けているものがあります – Kaitlyn
JSfiddleを作成するときにJSエラーが発生します:https://jsfiddle.net/jennifergoncalves/h3dpghe6/ エラー:「$ containerstep.isotope関数ではありません " コード/プラグインがありませんか? –