从函数中提取var

时间:2012-06-12 18:39:21

标签: javascript function global variables

似乎无法从函数中拉出一个值......看起来很简单,但无法让它去。我认为这是一个asyc问题,但即使是async:false;它仍然返回undefined。

<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>

1 个答案:

答案 0 :(得分:2)

包含document.write(window.activeTab)的脚本;在单击链接之前运行良好,否则它将覆盖整个文档,因为如果DOM已经加载,那就是document.write所做的。

由于您在点击链接窗口之前正在运行它。尚未为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