サポート » 使い方全般 » 「clickイベントで文字部分(aタグ)だけ反応しない」

  • 解決済 NicoL07

    (@nicol07)


    はじめまして。
    HTMLは独学なので初心者レベルですが、
    テーマを「Twenty Fourteen」→「賢威」にローカル環境で変更中に行き詰まってます。

    「Twenty Fourteen」で動いていたタブメニューを賢威用に変更した結果、
    タブ部分の文字以外をクリックすると反応してくれますが、文字(aタグ付き)をクリックするとaタグの反応をしているようでページが所定位置にズルっと動きます。

    参考サイト
    ↑のトップページの下のほうにあるタブメニューのように動かしたい。

    jQueryはwordpressのものを使用しています。

    ●jsファイル(my-script)
    jQuery(document).ready(function($){
    // Tab Menu
    $(‘#top3 .cont-box:not(:first)’).hide();
    $(‘#tab-menu li:first’).addClass(‘active’);
    $(document).on(‘click’, ‘#tab-menu li’, function() {
    $(‘#tab-menu li’).removeClass(‘active’);
    $(this).addClass(‘active’);
    $(‘#top3 .cont-box’).stop().hide();
    $($(this).find(‘a’).attr(‘href’)).stop().fadeIn();
    return false;
    });

    //link box
    $(document).on(‘click’, ‘#top3 .link-box’, function() {
    var anchorBoxHref = $(this).find(‘a’);
    window.location.href = anchorBoxHref.attr(‘href’);
    });

    });

    ●jsファイルの読み込み(Function.php)
    function register_jquery() {
    wp_register_script(‘my-script’, get_bloginfo(‘template_directory’) .’/js/my-script.js’,”,”,true);
    wp_enqueue_script(‘my-script’);
    }

    どうしたら文字部分をクリックしてもタブ移動してくれるようにできるのか
    アドバイス下さい。
    よろしくお願いします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • こんにちは。例えば a のクリックイベントに、親要素のトリガーを設定してはどうでしょうか。

    $('#tab-menu li>a').on( 'click', function(e){
      e.preventDefault();
      $(this).parent().stop().trigger('click');
    });

    追記です、↑だとダメかもしれません。
    li ではなく a にタブ移動のイベントを設定すれば確実です。

    スレッド開始 NicoL07

    (@nicol07)

    アドバイスありがとうございます。

    早速試してみました。

    $('#tab-menu li>a').on( 'click', function(e){
      e.preventDefault();
      $(this).parent().stop().trigger('click');
    });

    この状態では変化がなかったのでaタグを含めた要素に変更したところ
    タブ遷移はするようになりました。
    しかし、タブ内容が表示されません。

    jQuery(document).ready(function($){
    	$('#top3 .cont-box:not(:first)').hide();
    	$('#tab-menu li>a:first').addClass('active');
    	$('#tab-menu li>a').on('click', function(e) {
    		$('#tab-menu li>a').removeClass('active');
    		$(this).addClass('active');
    		$('#top3 .cont-box').stop().hide();
            	$($(this).find('a').attr('href')).stop().fadeIn();
    		return false;
    	});
    });
    <div id="top3">
    <ul id="tab-menu">
    <li id="tabA" class="tabbox"><a href="#tab-contA">メニューA</a>
    <li id="tabB" class="tabbox"><a href="#tab-contB">メニューB</a>
    <li id="tabC" class="tabbox"><a href="#tab-contC">メニューC</a>
    
    <div id="tab-contA" class="cont-box">メニューAの内容</div>
    <div id="tab-contB" class="cont-box">メニューBの内容</div>
    <div id="tab-contC" class="cont-box">メニューCの内容</div>
    </div>

    aタグのclassに’active’が追加されるようになりましたが、
    クリックしたタブの「display:none」が解除されず表示されません。

    aタグの動き(ズルっと動く)はなくなりました。

    引き続きアドバイスいただければ幸いです。

    スレッド開始 NicoL07

    (@nicol07)

    解決しました!

    jQuery(document).ready(function($){
    	$('#top3 .cont-box:not(:first)').hide();
    	$('#tab-menu li:first').addClass('active');
    	$('#tab-menu li>a').click(function() {
    		$('#tab-menu li').removeClass('active');
    		$(this).parent().addClass('active');
    		$('#top3 .cont-box').stop().hide();
            	$($(this).parent().find('a').attr('href')).stop().fadeIn();
    		return false;
    	});
    });

    (this).parent()で親要素を指すようにしてあげたら思う通りに反応するようになりました。

    既に開いているタブをクリックすると位置がずれる反応に対してはcssで
    #tab-menu .active a { pointer-events: none; }
    リンクを無効化することで無反応になりました。

    mizubeさんのアドバイスにより解決のヒントを得ることができました。
    ありがとうございました。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「「clickイベントで文字部分(aタグ)だけ反応しない」」には新たに返信することはできません。