私は JavaScript に特化したコーディングにかなり慣れていないので、質問を投げかけて申し訳ありません。
私がやろうとしているのは、テンプレートを再設計することです。ナビゲーション タブの長さを編集する必要があります。私が推測する文字数で測定されたタブの長さを自動的にスケーリングするJavaスクリプト(tabs.js)があります。問題は、単語の文字数が変わった場合でも、タブの長さを同じように設定するにはどうすればよいかということです。
これはジャバスクリプトです
tabs = {
init : function(){ $('.tabs').each(function(){
var th=$(this),
tContent=$('.tab-content',th),
navA=$('.nav a',th)
tContent.not(tContent.eq(0)).hide()
navA.click(function(){
var th=$(this),
tmp=th.attr('href')
tContent.not($(tmp.slice(tmp.indexOf('#'))).fadeIn(1000)).hide()
$(th).parent().addClass('selected').siblings().removeClass('selected').find('span').stop().animate({opacity:'0'},600);
Cufon.refresh();
return false;
});
これが私のhtmlコードです
<header>
<nav>
<ul id="menu">
<li><a href="#!/page_Home"><span></span><strong>EVENTS</strong></a></li>
<li><a href="#!/page_About"><span></span><strong>HISTORY</strong></a></li>
<li><a href="#!/page_Portfolio"><span></span><strong>IMPRESSIONS</strong></a></li>
<li><a href="#!/page_Services"><span></span><strong>BOOKING</strong></a></li>
<li><a href="#!/page_Contact"><span></span><strong>CONTACT</strong></a></li>
</ul>
</nav>
</header>
よろしくお願いします。