headerのリンクボタンを、該当ページ内にいるときも押せるようにしたい

Question

<!--header--> 
<script type="text/javascript">
	writeHeader();
</script> 
<!--//header-->

として各ページにheaderが設定されています。
中身は、

<script>
$(function() {  
	var $dir = location.href.split("/");  
	var $dir2 = $dir[3];
        	
	if($dir2==""){
		$("p.home").html('<img src="/images/common/home_on.png" />');
	}else{
		$('p' + '.' + $dir2).html('<img src="/images/common/' +$dir2 +'_on.png" />');
	}
}); 
</script>

<header>
	<div class="innerbox">
    	<p class="ebtn"><a href="../sv-english/index.html" target="_blank"><img src="/images/common/e_btn.png" alt="English" /></a></p>
        <div class="navibox clearfix">
        	<div class="leftbox"><a href="https://www.test.co.jp/"><img src="/images/common/logo.png" alt="TEST" /></a></div>
        	<div class="rightbox">
            	<p class="home"><a href="https://test.co.jp/"><img src="/images/common/home_off.png" /></a></p>
                <p class="A"><a href="/A/"><img src="/images/A.png" /></a></p>
                <p class="B"><a href="/B/"><img src="/images/B.png" /></a></p>
                <p class="B"><a href="/C/"><img src="/images/C.png" /></a></p>
                <p class="D"><a href="/D/"><img src="/images/D.png" /></a></p>
                <p class="E"><a href="/E/"><img src="/images/E.png" /></a></p>
            </div>
        </div>
    </div>
</header>

となっています。
A~Eのページ内は、カテゴリの目次のようなもので、
Aのページには、A-1、A-2、A-3のページのリンクが貼ってあります。
（B以下同様）
現在、Aのベージから、headerのAのボタンが押せません。
また、A内のリンク先の（A-1やA-2の）ページからも、Aのボタンは押せず、
A-2ページから、A目次ページに戻るのが面倒な仕様になってしまいました。

引き継いだもので、上記は私が作成したわけで有りません

A内にいても、headerのAのボタンを押せるようにしたいのですが、
どうしたらいいのでしょうか。

Answer 1

恐らくaタグも上書きされて消えていると思うので、下記のように変更したらできないでしょうか

    if($dir2==""){
        $("p.home").children('a').html('<img src="/images/common/home_on.png" />');
    }else{
        $('p' + '.' + $dir2).children('a').html('<img src="/images/common/' +$dir2 +'_on.png" />');
    }

Comments

[退会済みユーザー]

na-01様
出来ました！ありがとうございます。
JavaScriptは全くわかっていないのですが、
簡単に説明をして頂けますでしょうか。

[na-01]

$("hogehoge").htmlという箇所で
pタグの中にあるタグ全部を書き換えているのでリンクも消えてました。
上記のコードで言うと
<p class="A"><a href="/A/"><img src="/images/A.png" /></a></p>
→<p class="A"><img src="hogehoge.png" /></p>になっている。
なのでpタグの下のaタグの中のimgタグを書き換えるように変更しました。
（説明が下手ですみません…）

[退会済みユーザー]

ご説明をありがとうございました。
本当に助かりました。
また機会がありましたら宜しくお願い致します。