サポート » 使い方全般 » タブの切り替えカスタマイズについて2

  • 解決済 osat99

    (@osat99)


    以前、こちらのカテゴリーにて、タイトルの質問をさせていただいた者です。

    //ダイレクトリンク
    $(function() {
    	//location.hashで#以下を取得 変数hashに格納
    		var hash = location.hash;	
    		//hashの中に#tab~が存在するか調べる。
    		hash = (hash.match(/^#tab\d+$/) || [])[0];
    	   
    		 //hashに要素が存在する場合、hashで取得した文字列(#tab2,#tab3等)から#より後を取得(tab2,tab3)	
    	    if($(hash).length){
    		var tabname = hash.slice(1) ;
    		} else{
    	    // 要素が存在しなければtabnameにtab1を代入する
    	    var tabname = "tab1";}
    		//コンテンツを一度すべて非表示にし、
    		$('.content_area').css('display','none');
    
    		//一度タブについているクラスselectを消し、
    		$('.tab_area li').removeClass('select');
    
    		var tabno = $('ul.tab_area li#' + tabname).index();
    		
    		//クリックされたタブと同じ順番のコンテンツを表示します。
    		$('.content_area').eq(tabno).fadeIn();
    		
    		//クリックされたタブのみにクラスselectをつけます。
    		$('ul.tab_area li').eq(tabno).addClass('select')
    
    		$('a').on('click', function() {
    	var tabname = ($(this).attr('href').match(/#(tab\d+$)/) || [])[1];
    	if (!tabname) {
    		return;
    	}
    
    	//コンテンツを一度すべて非表示にし、
    		$('.content_area').css('display','none');
    
    		//一度タブについているクラスselectを消し、
    		$('.tab_area li').removeClass('select');
    
    		var tabno = $('ul.tab_area li#' + tabname).index();
    		
    		//クリックされたタブと同じ順番のコンテンツを表示します。
    		$('.content_area').eq(tabno).fadeIn();
    		
    		//クリックされたタブのみにクラスselectをつけます。
    		$('ul.tab_area li').eq(tabno).addClass('select')
    })
    	
    			});
    
    $(function() {
    	//クリックしたときのファンクションをまとめて指定
    	$('ul.tab_area li').click(function() {
    		//.index()を使いクリックされたタブが何番目かを調べ、
    //		indexという変数に代入します。
    		var index = $('ul.tab_area li').index(this);
    
    		//コンテンツを一度すべて非表示にし、
    		$('.content_area').css('display','none');
    
    		//クリックされたタブと同じ順番のコンテンツを表示します。
    		$('.content_area').eq(index).fadeIn();
    
    		//タブについているクラスselectを消し、
    		$('.tab_area li').removeClass('select');
    
    		//クリックされたタブのみにクラスselectをつけます。
    		$(this).addClass('select')
    	});
    });

    こちらのコードで別ページ&同ページからの#tab数字 クリックで指定のタブを開く事が出来たのですが、その際、選択された#tab数字のクラスには当然selectクラスが付与されるのですが、
    これを、単純にページへアクセスした時にはどのタブにも付与させないようにするには、どう追記すればよろしいでしょうか?

    http://◯◯◯.com/test.htm#tab1 では当然tab1にselectクラスが付与されますが、
    http://◯◯◯.com/test.htm にアクセスした場合はどのタブにもクラスを付与しないという事です。

    よろしくお願いいたします。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • こんにちは

    下記のように変更するとできるかもしれません(未検証です)

    if($(hash).length){
    	var tabname = hash.slice(1) ;
    } else{
    	// 要素が存在しなければtabnameにtab1を代入する
    	var tabname = "tab1";}

    if($(hash).length){
    	var tabname = hash.slice(1) ;
    } else{
    	$('.tab_area li').removeClass('select');
    	return;
    }

    なお、ここは WordPress のフォーラム(WordPress および wordpress.org で配布されているテーマとプラグインが対象)なので、JavaScript についての質問は回答がつきにくいと思います。
    https://ja.wordpress.org/support/article/guidelines/

    あとは、JavaScript について質問できる他のフォーラムなどで聞かれた方が適切な回答を得られるように思います。

    トピック投稿者 osat99

    (@osat99)

    ishitaka 様

    いつもありがとうございます。
    のちほど検証してみます。

    そういえば、先日検索でかかって見つけた「XO Post Background」プラグインを使用させていただいております。
    こちらもありがとうございます。

    トピック投稿者 osat99

    (@osat99)

    ishitaka 様

    ありがとうございます。お教えいただきましたコードで解決いたしました。

    次回からは、このジャンルの質問はカテゴリーを変えて質問してみます。
    ありがとうございました。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「タブの切り替えカスタマイズについて2」には新たに返信することはできません。