使用jquery点击按钮来激活/停用文本
问题描述:
我有4个“按钮”,当你点击每一个会使某段文字出现,然后在下一个按钮被点击时消失。这4个按钮分别标记为.planing
,.concept
,.construct
和.finish
,其中的段落与它们一致地命名以匹配。我有HTML和JQuery代码在这里:使用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;
});
我不确定我缺少什么,因为所有的文本都一次显示,并且在标题切换时不激活/消失。
答
请确保您有jQuery和同位素库中的脚本标记
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/isotope.pkgd.min.js"></script>
这里是我得到了在codepen工作与你的代码,我只加那些CDN的。
希望这有助于;)
+0
完美!谢谢 – Kaitlyn
答
// 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/[email protected]/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一起做这样的小任务。这段代码只是执行相同任务的几行代码。
那么,你的问题是什么? –
有些东西我缺少,因为按钮在切换时不起作用 – Kaitlyn
当为此创建JSfiddle时出现JS错误:https://jsfiddle.net/jennifergoncalves/h3dpghe6/ 错误:“$ containerstep.isotope不是函数“ 你缺少代码/插件吗? –