クリックファンクションがうまくいかない
class="link-block"のついたliつまりリストをクリックした時、.removeClass('active');でactiveというクラスを削除するようにしたかったのですが、
なぜかリストをクリックしても反応せずに削除されません。
id="maware"のliだけは、反応して削除されます。
CSSにとしてもだめでした。どうもclass="link-block"のついたリストをクリックできていないのかと思っているのですが、上下の順番でクリックできていないのでしょうか?
.link-block {
display: block;
z-index: 99999;
}
・ソースコード
<div class="kuruttosuru">aaa</div>
<!-- drawermenu -->
<!-- drawermenu-button -->
<div class="modal-button-wrap">
<a class="animation-hover action-hover modal-button-wrap__button">
<span class="modal-button-wrap__border"></span><!-- border -->
<span class="modal-button-wrap__border"></span><!-- border -->
<span class="modal-button-wrap__border"></span><!-- border -->
</a>
</div>
<!-- drawermenu -->
<nav>
<div id="nav__drawermenu-wrap">
<ul>
<li id="maware"><a class="link-block" href="#js-about-me">ABOUTME</a></li>
<li><a class="link-block" href="#js-about-me"><span class="gotootherpage"><img class="top-gnav__link-sixth__goto-other-page" src="img/common-img/goto-other-page.svg" alt="goto-other-page-image"></span>ABOUTME</a></li>
<li><a class="link-block" href="#js-gallary">GALLARY</a></li>
<li><a class="link-block" href="#js-gmap">MAP</a></li>
<li><a class="link-block" href="#js-contact">CONTACT</a></li>
<li><a class="link-block" href="http:///index.html">TOP</a></li>
<li><a class="link-block" href="http:///index.html">BLOG</a></li>
</ul>
</div>
</nav>
<!-- /drawermenu -->
・JS
<script>
$(function(){
$('.kuruttosuru').on('click', function() {
$(this).addClass('active');
return false;
});
});
</script>
<!-- drawermenu-button-three-whiteline-クリックした際にクルット回るアクション -->
<script>
$(function(){
$('.modal-button-wrap__button, .link-block').on('click', function() {
$(this).removeClass('active');
return false;
});
});
</script>
・下記のJSがあると、うまくいかず下記をコメントアウトするとうまくいきます。
下記に何かおかしくなる要素があるのでしょうか?
<!-- ページ内遷移 -->
<script>
$(function(){
// #で始まるアンカーすべてをクリックした場合に処理
$('a[href^=#]').click(function() {
// スクロールの速度
var speed = 1000; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
_____________
お礼
ご回答、ありがとうございます。仰る通り、{}の中の文字を編集したら、なぜか表示されないようになります。 そこで、「{lang: }」を消して、「The Older page」、「The Newer page」のみ記入したら、表示されるようになりました。 参考になりました。ありがとうございます。