问题的短篇版本：
单击，更改单击标签的颜色，然后滚动到.filterDiv元素 我只能让它改变颜色，或直接滚动到.filterDiv而不改变颜色。
大家好！ 实际上我有一个侧边栏布局的页面。侧边栏包含可供选择的类别。
第一个“点击”功能是w3schools filterSelection，但它可以点击，因此该事件应该是一个“点击”事件。
<script>
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
// Show filtered elements
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
</script>
第二次点击事件，就是当您点击要显示项目的类别时，它必须将颜色从黑色更改为红色。
$('.col-sm-3 label').on('click', function(){
$('label.active').removeClass('active');
$(this).addClass('active');
});
并且第三次点击事件是，当点击类别时，它应滚动到所需的div /元素。
$('.col-sm-3 label').on('click', function(){
$('html, body').animate({
scrollTop: $(".filterDiv").offset().top
}, 1000);
return false;
});
这里也是Long HTML：
<div class="row" style="margin:0px 0px;">
<div class="col-xs-12 col-sm-3">
<!-- Control buttons -->
<div style="border:1px solid #d0d0d0;padding:25px 15px;border-radius:5px;">
<p style="margin-top:0px;border-bottom:1px solid #d0d0d0;font-size:28px;padding-bottom:10px;">Hidhi një sy dhuratave</p>
<input id="dhurata" type="radio" onclick="filterSelection('dhurata')" name="category" style="display:none;">
<label for="dhurata" class="active">Dhurata me dashuri nga Telekom</label>
<input id="cela" type="radio" onclick="filterSelection('cela')" name="category" style="display:none;">
<label for="cela" class="">Smartphone</label>
<input id="smartp" type="radio" onclick="filterSelection('smartp')" name="category" style="display:none;">
<label for="smartp" class="">Smartphone Premium</label>
<input id="elektronike" type="radio" onclick="filterSelection('elektronike')" name="category" style="display:none;">
<label for="elektronike" class="">Elektronike</label>
<input id="fash" type="radio" onclick="filterSelection('fash')" name="category" style="display:none;">
<label for="fash" class="">Fashion</label>
<input id="aksesor" type="radio" onclick="filterSelection('aksesor')" name="category" style="display:none;"><label for="aksesor" class="">Aksesorë</label>
<input id="kinema" type="radio" onclick="filterSelection('kinema')" name="category" style="display:none;">
<label for="kinema" class="">Kinema</label>
<input id="libra" type="radio" onclick="filterSelection('libra')" name="category" style="display:none;">
<label for="libra" class="">Libra</label>
<input id="ushqim" type="radio" onclick="filterSelection('ushqim')" name="category" style="display:none;">
<label for="ushqim" class="">Drinks</label>
<input id="buk" type="radio" onclick="filterSelection('buk')" name="category" style="display:none;">
<label for="buk" class="">Ushqim</label>
<input id="kozmetik" type="radio" onclick="filterSelection('kozmetik')" name="category" style="display:none;">
<label for="kozmetik" class="">Kozmetike</label>
</div></div><div class="col-xs-12 col-sm-8">
<div class="filterDiv dhurata show" id="xeni">
<div class="row">
<div class="col-xs-6 col-sm-4 col-lg-2" data-toggle="popover" title="" data-content=" Një filxhan çaji cool nga Electronic Beats.
" data-original-title=" Filxhan caji
" data-trigger="focus" tabindex="0" role="button" data-placement="top">
<img src="icon/icon-03.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Një filxhan çaji cool Electronic Beats!
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2" data-toggle="popover" title="" data-content="Some content inside the popover" data-original-title="">
<img src="icon/icon-05.png" style="width:100%;height:auto;"><div class="desc" style="display: none;"> Kufje premium EB Urbanears pa tela. Për entuziastët e muzikës.
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2">
<img src="icon/icon-06.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Bateri Portative 2200mAh
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2">
<img src="icon/icon-07.png" style="width:100%;height:auto;">
<div class="desc" style="display:none;"> Një çift blloqesh shënimi me lëkurë. Paketë 2 copëshe.
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2 open">
<img src="icon/icon-08.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;"> Një çift T-Shirt Electronic Beats. Paketë 2 copëshe.
</div>
</div><div class="col-xs-6 col-sm-4 col-lg-2">
<img src="icon/icon-09.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Një çantë shpine simpatike nga Electronic Beats.</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2">
<img src="icon/icon-14.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;"> Një çadër shiu premium nga Telekom.
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2">
<img src="icon/icon-15.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;"> Një arush nga Telekom. Dhurata më e përqafueshme që kemi!
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2">
<img src="icon/icon-20.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;"> 1 GB internet te vlefshme per 7 dite
</div>
</div>
</div>
</div>
<div class="filterDiv cela">
<div class="row">
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-13.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">LG G5</div>
</div><div class="col-xs-6 col-lg-2">
<img src="icon/icon-22.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Alcatel POP 4</div>
</div>
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-16.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Samsung Galaxy A5 2017</div>
</div>
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-23.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Alcatel Idol 4</div>
</div>
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-04.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Smartphone T3</div>
</div>
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-10.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Smartphone A6</div>
</div>
</div>
</div><div class="filterDiv smartp">
<div class="row">
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-11.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">iPhone 7</div>
</div>
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-12.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">iPhone SE</div>
</div>
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-17.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Samsung Galaxy S6 Edge</div>
</div><div class="col-xs-6 col-lg-2">
<img src="icon/icon-18.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Samsung Galaxy S7</div>
</div><div class="col-xs-6 col-lg-2">
<img src="icon/icon-19.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">iPhone 6</div>
</div>
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-21.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Samsung Galaxy S8 </div>
</div>
</div>
</div><div class="filterDiv elektronike">
<div class="col-xs-6 col-lg-2 "><img src="icon/icon-28.png" style="width:100%;">
</div>
<div class="col-xs-12 col-lg-10"><p style="color:#e20074;font-size:24px;font-weight:900;">TI PËRFITON:</p>
<p>10% ulje në televizorë dhe elektroshtëpiake ose 2% ulje në laptop, tablet dhe celularë. Kodi vlen edhe nëse pajisjet janë në dyqanet Neptun.</p>
<p>Si? Paraqit kodin që ke në SMS në dyqan Neptun. Vizito <a href="www.neptun.al">www.neptun.al</a> për listën e dyqaneve</p></div>
</div><div class="filterDiv fashion">
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-24.png" style="width:100%;">
</div><div class="col-xs-6 col-lg-2">
<img src="icon/icon-25.png" style="width:100%;">
</div>
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-33.png" style="width:100%;">
</div>
<div class="col-xs-12 col-lg-12"><p style="color:#e20074;font-size:24px;font-weight:900;">TI PËRFITON:</p>
<p>20% ulje tek dyqani përkatës Mango, Springfield, Parfois tek TEG. Kodi është i vlefshëm për 1 artikull të koleksionit të ri. Afati i përdorimit ndryshon, ju lutemi konsultohuni me përfaqësuesin
e shitjeve ose <a href="https://www.electronicbeats.com.al">www.electronicbeats.com.al</a></p><p>
Si? Paraqit kodin që ke në SMS në dyqanet përkatëse. Ulja aplikohet mbi një artikull të vetëm.</p></div>
</div><div class="filterDiv kinema">
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-31.png" style="width:100%;">
</div><div class="col-xs-12 col-lg-10"><p style="color:#e20074;font-size:24px;font-weight:900;">TI PËRFITON:</p>
<p>1 Biletë FALAS tek Cineplexx. Çdo ditë që dëshiron, në çdo orë.</p><p>
Si? Paraqit kodin që ke në SMS në biletarinë e Cineplexx.</p>
</div>
</div>
<div class="filterDiv libra">
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-26.png" style="width:100%;">
</div><div class="col-xs-12 col-lg-10"><p style="color:#e20074;font-size:24px;font-weight:900;">TI PËRFITON:</p>
<p>10% ulje në çdo blerje tek <a href="https://www.bukinist.al">www.bukinist.al.</a> Ulja aplikohet mbi totalin e porosisë. Bukinist.al pranon porosi nga gjithë Shqipëria.
Si? Përfaqësuesi ynë i shitjeve do të shënojë një kod unik mbi këtë fletë. Përdor këtë kod:</p>
<ul><li>Në përfundimin e porosisë tek fusha “KUPONA”</li><li>Në çdo kanal tjetër ku pranohen porosi nga Bukinist, mund t’i transmetoni kodin e kuponit përfaqësuesit të Bukinist për të përfituar uljen.</li></ul>
</div>
</div><div class="filterDiv ushqim">
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-30.png" style="width:100%;">
</div>
<div class="col-xs-12 col-lg-10"><p style="color:#e20074;font-size:24px;font-weight:900;">TI PËRFITON:</p>
<p>Një kupon me vlerë 250 lekë që mund ta shpenzosh në çdo bar Mon Cheri.
Si? Përfaqësuesi ynë i shitjeve do t’ju dorëzojë një kupon zyrtar (në formë bilete) Mon Cheri.
</p><p>
Paraqitni kuponin në çdo pikë Mon Cheri tek baristët simpatikë, dhe shijoni porosinë tuaj.</p>
</div>
</div><div class="filterDiv kozmetik">
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-35.png" style="width:100%;">
</div>
<div class="col-xs-12 col-lg-10"><p style="color:#e20074;font-size:24px;font-weight:900;">TI PËRFITON:</p>
<p>15 % ulje në çdo blerje tek <a href="www.ele.al">www.ele.al</a>. Ulja aplikohet mbi totalin e porosisë. ele.al. Ka produkte kozmetike profesionale nga Revlon, American Crew, Orofluido, etj.</p><p>
Si? Përfaqësuesi ynë i shitjeve do të shënojë një kod unik mbi këtë fletë.
Përdor këtë kod: Në përfundimin e porosisë tek fusha “KODI I ZBRITJES” dhe shtyp “APLIKO”
</p>
</div>
</div><div class="filterDiv buk">
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-32.png" style="width:100%;">
</div>
<div class="col-xs-12 col-lg-10"><p style="color:#e20074;font-size:24px;font-weight:900;">TI PËRFITON:</p>
<p>
20% ulje për çdo artikull, në çdo pikë shitje.</p><p>
Si? Paraqit kodin që ke në SMS në çdo pikë KFC.
</p>
</div><div class="row">
<div class="col-xs-6 col-sm-3"><img src="menu/mix_bucket_for 4.jpg" style="width:100%;"></div>
<div class="col-xs-6 col-sm-3"><img src="menu/twister_menu.jpg" style="width:100%;"></div>
<div class="col-xs-6 col-sm-3"><img src="menu/file_salad.jpg" style="width:100%;"></div>
<div class="col-xs-6 col-sm-3"><img src="menu/boxmaster_menu.jpg" style="width:100%;"></div>
</div>
</div><div class="filterDiv aksesor">
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-34.png" style="width:100%;">
</div>
<div class="col-xs-12 col-lg-10"><p style="color:#e20074;font-size:24px;font-weight:900;">TI PËRFITON:</p>
<p>30% ulje për të gjithë artikujt bijou ose argjend në dyqanet Bijoutiful.
</p><p>Si? Paraqit kodin që ke në SMS në pikat e shitjes Bijoutiful.
Ulja aplikohet mbi gjithë porosinë nëse përfshin artikuj të vlefshëm. Mëso pikat e shitjes Bijoutiful tek <a href="www.bijoutiful.al">www.bijoutiful.al</a>
</p>
</div>
</div>
<!-- The filterable elements. Note that some have multiple class names (this can be used if they belong to multiple categories) -->
</div>
</div>
我尝试将它们组合成一个.on（click）事件，我尝试过.bind而不是.on，我已经尝试过.click了。似乎只有一个事件会执行，这取决于哪个事件先于另一个事件。
答案 0 :(得分：0)
你可以这样： -
$(document).on('click', '.col-sm-3 label', function(){
$('.col-sm-3 label.active').removeClass('active');
$(this).addClass('active');
var rdiv = $(this).attr("for");
$('html, body').animate({
scrollTop: $("."+rdiv).offset().top
}, 1000);
});