器用長者なれ

どんな事でもついつい拘ってしまって器用貧乏になりがちですが、気持ちだけは豊かでありたい。

ワードプレス

ワードプレスでretern false;が効かない時の対処法


 
仕事用のホームページをHTMLサイトからワードプレスに移行作業中。
 
HTMLサイトで使用しているタブメニューのHTMLとCSSをコピペしてきました。
 
動作自体はちゃんとするものの、タブをクリックするとタブの内容部分の先頭部分にヌルヌルッと移動してしまう。
別にダメなわけじゃないのですが、HTMLサイトではそんな挙動はしていないので、ちょっと気になる。
内容部分の頭に移動してしまうと、タブの部分が表示から外れて見えなくなってしまうので気持ち悪いし。

スポンサーリンク
スポンサーリンク

 
で、いろいろ調べたのだけど、どうも「return false;」というのが効いていないらしい。
下が元のhtmlソース。all aboutというサイトで解説されていたもの。

<div class="tabbox">
<ul class="tabs">
<li class="tab" id="tabA"><a href="#tab1" onclick="FocusTab('tabA','white'); ChangeTab('tab1'); return false;">tabA</a></li>
<li class="tab" id="tabB"><a href="#tab2" onclick="FocusTab('tabB','white'); ChangeTab('tab2'); return false;">tabB</a></li>
<li class="tab" id="tabC"><a href="#tab3" onclick="FocusTab('tabC','white'); ChangeTab('tab3'); return false;">tabC</a></li>
<li class="tab" id="tabD"><a href="#tab4" onclick="FocusTab('tabD','white'); ChangeTab('tab4'); return false;">tabD</a></li>
</ul>
<div id="tab1" class="tab">
<p class="tabhead"><b>tab1</p>
</div>
<div id="tab2" class="tab">
<p class="tabhead"><b>tab2</p>
</div>
<div id="tab3" class="tab">
<p class="tabhead"><b>tab3</p>
</div>
<div id="tab4" class="tab">
<p class="tabhead"><b>tab4</p>
</div>
</div>
<script type="text/javascript">FocusTab('tabA','white');ChangeTab('tab1');</script> <!--// デフォルトのタブを選択// -->

 
この「return false;」を入れておくと、タブをクリックした際に「a href="#"」が効いてリンク先である"#"、つまりタブの内容部分の先頭へ飛ばないようにするという、正に今回起きている処理を中断してくれるというものなんですよね。
でも、ちゃんと入れてあるのに効いていない。
 
あちこち調べてみても、これを入れておけば「a href」のリンクへ飛ぶ処理がキャンセルされるよー、と書いてあるサイトばかりでラチがあかない。
さらに色々調べてみたら、やっと解決したので備忘録代わりに記事にしておきます。
 
結論として"javascript:void(0)"という記述を「a href="#"」の#の部分に入れたら飛ばない様になりました。

<div class="tabbox">
<ul class="tabs">
<li class="tab" id="tabA"><a href="javascript:void(0)" onclick="FocusTab('tabA','white'); ChangeTab('tab1'); return false;">tabA</a></li>
<li class="tab" id="tabB"><a href="javascript:void(0)" onclick="FocusTab('tabB','white'); ChangeTab('tab2'); return false;">tabB</a></li>
<li class="tab" id="tabC"><a href="javascript:void(0)" onclick="FocusTab('tabC','white'); ChangeTab('tab3'); return false;">tabC</a></li>
<li class="tab" id="tabD"><a href="javascript:void(0)" onclick="FocusTab('tabD','white'); ChangeTab('tab4'); return false;">tabD</a></li>
</ul>
<div id="tab1" class="tab">
<p class="tabhead"><b>tab1</p>
</div>
<div id="tab2" class="tab">
<p class="tabhead"><b>tab2</p>
</div>
<div id="tab3" class="tab">
<p class="tabhead"><b>tab3</p>
</div>
<div id="tab4" class="tab">
<p class="tabhead"><b>tab4</p>
</div>
</div>
<script type="text/javascript">FocusTab('tabA','white');ChangeTab('tab1');</script> <!--// デフォルトのタブを選択// -->

これでOK。
解決するのに丸2日も掛かってしまった。汗
 
「return false;」の記述は消してもいいかもしれないけど、調べている最中にどこかのサイトに「IE6にはこの記述がないと・・・」みたいなことが書いてあったような気がするので、そのまま残しておこうかと思います。
まぁ、IE6なんて化石みたいなもん使ってる人はいない気がしますけど。

スポンサーリンク
スポンサーリンク

-ワードプレス