2013-06-27 92 views
1

一個的jsfiddle外面工作,我的目標是做一個網頁,互動視頻,同時尋找在這裏,我遇到了一個鏈接指向一個jsFiddle that suits my needs.代碼失敗在Dreamweaver

正如代碼製作的的jsfiddle完全正常,當我試圖將它複製到DreamWeaver中時(它似乎JavaScript已停止工作),它崩潰了。

我已經把它放在一起這樣:

<html> 
<head> 

<style> 
div.tab-headers>a 
{ 
    display: inline-block; 
    width: 50px; 
    background-color: #eee; 
    padding: 10px; 
    border: 1px solid #666; 
} 

div.tab 
{ 
    height: 400px; 
    width: 100%; 
    border: 1px solid #666; 
    background-color: #ddd; 
    padding: 10px; 
} 
</style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
$("div.tab-headers>a").click(function() { 
    // Grab the href of the header 
    var _href = $(this).attr("href"); 

    // Remove the first character (i.e. the "#") 
    _href = _href.substring(1); 

    // show this tab 
    tabify(_href); 
}); 

function tabify(_tab) { 
    // Hide all the tabs 
    $(".tab").hide(); 

    // If valid show tab, otherwise show the first one 
    if (_tab) { 
     $(".tab a[name=" + _tab + "]").parent().show(); 
    } else { 
     $(".tab").first().show(); 
    } 
} 

// On page load... 
$(document).ready(function() { 
    // Show our "default" tab. 
    // You may wish to grab the current hash value from the URL and display the appropriate one 
    tabify(); 
}); 
</script> 
</head> 

<body> 

<div class="tab-headers"> 
    <a href="#tab1">T1</a> 
    <a href="#tab2">T2</a> 
    <a href="#tab3">T3</a> 
<div> 


<div class="tab"> 
    <a name="tab1">tab 1</a> 
    Tab contents 
</div> 
<div class="tab"> 
    <a name="tab2">tab 2</a> 
    Tab contents 
</div> 
<div class="tab"> 
    <a name="tab3">tab 3</a> 
    Tab contents 
</div> 
</body> 
</html> 
+0

只看該頁面的左側設置 - 殲avaScript被設置爲運行'onLoad',這意味着DOM完全加載後。它爲你構建輸出頁面,並將你的代碼放入正確的處理程序中('window.onload')。你的代碼在主體內容被渲染之前運行。將您的JavaScript代碼移動到''的底部 – Ian

回答

1

你需要在你的文件準備好處理移動單擊處理代碼 -

$(document).ready(function() { 
    $("div.tab-headers>a").click(function() { 
     // Grab the href of the header 
     var _href = $(this).attr("href"); 

     // Remove the first character (i.e. the "#") 
     _href = _href.substring(1); 

     // show this tab 
     tabify(_href); 
    }); 
    tabify(); 
}); 

究其原因,它適用於小提琴的是,的jsfiddle自動換行代碼在準備處理 - 他們是選擇框左邊選擇雖然