2

関数から値を引き出すことができないようです...十分に単純に思えますが、うまくいきません。私はそれが非同期の問題であると考えましたが、async:false; を使用しても問題はありません。それはまだ未定義を返します。

<script type="text/javascript">
var activeTab;

function toggleVisibility(selectedTab) {
//Let the navigation know what tab is selected
activeTab = selectedTab;
return activeTab;
}
</script>

<script type="text/javascript">
document.write(window.activeTab);
</script>

そして、ここに関数の呼び出しがあります

<a href="#" onclick="toggleVisibility('linkname');">LinkName</a>
4

1 に答える 1

2

document.write(window.activeTab); を含むスクリプト リンクをクリックする前に十分に実行されています。そうしないと、ドキュメント全体が上書きされます。これは、DOM が既に読み込まれている場合に document.write が行うことだからです。

リンク window.activeTab をクリックする前に実行しているため、まだ値が割り当てられていません。

これには多くの解決策がありますが、必要な解決策は、実際に何をしたいのかによって異なりますactiveTab。それだけでなく、本当に何かに使いたいと思っていると思いますdocument.write。

アップデート

の値に基づいて画像を更新したいようですwindow.activeTab。画像を更新するコードは、ページの読み込み時ではなく、リンクがクリックされたときに実行されるように、onclick ハンドラーにも含める必要があります。いくつかの理由で回避する必要がありますdocument.writeが、最も明白なのは、既に述べたとおりです。使用時にページが既に読み込まれている場合、ドキュメント全体が上書きされます。

次のようなことを試してみてください。

<a href="#tab1" class="tabs">LinkName</a>

そして、タブの HTML の後のページのどこかに:

<script>
(function(){

var tabs = document.getElementsByClassName('tabs');

// For each tab
for(var i = tabs.length; i--;){

    // Add click handler to tab
    tabs[i].onclick = switch_tab;

    // Hide tab
    a_to_tab(tabs[i]).style.display = 'none';
}

// Show first tab
a_to_tab(tabs[0]).style.display = '';



function switch_tab(){
    // Hide all tabs
    for(var j = tabs.length; j--;){
        a_to_tab(tabs[j]).style.display = 'none';
    }

    // Show this tab
    a_to_tab(this).style.display = '';

    // Cancel default onclick action
    return false;
}

// Get the tab element from the a element that refers to it by href
function a_to_tab(a){
    return document.getElementById(a.href.replace(/^[^#]*#/, ''));
}

})();
</script>

このJSFiddleを参照してください。

jQuery UI Tabsもチェックしてみてください。

于 2012-06-12T18:45:35.090 に答える