Help us understand the problem. What is going on with this article?

【Wordpress向け】現在のページへのリンクを無効化して、スタイルを変える

More than 3 years have passed since last update.

Wordpress向けです。

仕様

構造が同じページが複数ある。
サイドバーにそれらのページへのリンク一覧がある。
テンプレートは複数作らずに、ページ内にある現在のページへのリンクを無効にして背景色をつけるなどスタイルを変えたい。

HTML

http://piyo.jp/hogehoge/kuma/
http://piyo.jp/hogehoge/tama/
http://piyo.jp/hogehoge/kiso/
という三つのページがある想定で進めます。

HTML
<section>
   <h2>KUMAGATA</h2>
   <ul>
      <li><a href="../kuma" data-trigger="trigger">球磨</a></li>
      <li><a href="../tama" data-trigger="trigger">多摩</a></li>
      <li><a href="../kiso" data-trigger="trigger">木曽</a></li>
    </ul>
</section>

というサイドバーがあるとします。

js
var temp = function(){
    var $target = $('[data-trigger]'),  //サイドバーにあるリンク達
        url = window.location.href,  //現在のページのurl
        before = /(http[\s\S\w]*?\/hogehoge\/)/,  //'http'から'hogehoge/'までを指定
        after = /(\/)/,  //url最後の'/'を指定
        $trigger = url.replace(before, '').replace(after, ''),  //現在のページurl文字列から上記のbeforeとafterを削除
        compare_fnc = function($target,other,current){
            var $target_url = $target.attr('href'),  //サイドバーにあるリンクのurl
                before = /(\.\.)/,  //'../'を指定
                after = /(\/)/,  //url最後の'/'を指定
                $target_url_r = $target_url.replace(before, '').replace(after, '');  //サイドバーにあるリンクのurl文字列から上記のbeforeとafterを削除
            if($target_url_r == $trigger) {  //現在のページurlとリンク先が同じtargetに対して以下の動作を実行
                $target.removeClass(other).addClass(current);  //引数otherに指定したクラスを削除し、引数currentに指定したクラスを追加
                $target.on('click',function(){
                    return false;  //リンク機能を停止
                });
            }
        };
    if(!$target.length) return;  //targetが無い場合return
    $target.each(function(){  //eachでcompare_fncを回す
        compare_fnc($(this),'primary_btn','primary_btn-on');
    });
};

まとめ

wordpress使うのやめたい

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした