使用Javascript更改CSS類的點擊次數？

Question

我想改變一個CSS類的點擊。這裏是小提琴： http://jsfiddle.net/Margate/bdAD3/

<div id="MainContainer"> 
<div id="MainImageContainerLand"> 
    <img id="Main" src="MainImage01.jpg" </img> 
</div> 
<div id="TNBodyContainer"> 
    <img class="TNSL" id="TN1" style="left: 0px;" src="SmallImage01.jpg"></img> 
    <img class="TNSL" id="TN2" style="left: 135px;" src="SmallImage02.jpg"></img> 
    <img class="TNSL" id="TN3" style="left: 270px;" src="SmallImage03.jpg"></img> 
    <img class="TNSL" id="TN4" style="left: 405px;" src="SmallImage04.jpg"></img> 
    <img class="TNSL" id="TN5" style="left: 540px;" src="SmallImage05.jpg"></img> 
    <img class="TNSP" id="TN6" style="left: 675px;" src="SmallImage06.jpg"></img> 
    <img class="TNSP" id="TN7" style="left: 736px;" src="SmallImage07.jpg"></img> 
    <img class="TNSP" id="TN8" style="left: 797px;" src="SmallImage08.jpg"></img> 
    <img class="TNSP" id="TN9" style="left: 858px;" src="SmallImage09.jpg"></img> 
    <img class="TNSP" id="TN10" style="left: 919px;" src="SmallImage10.jpg"></img> 
</div> 
</div> 



window.onload = function() { 
    var ChangeMainImage = document.getElementById('Main'); 
var ChangeMainImageAndDiv = document.getElementById('Main').className = 
'MainImageContainerPort';; 
    document.getElementById('TN1').onclick = function() { 
     ChangeMainImage.src = 'MainImage01.jpg'; 
    }; 
    document.getElementById('TN2').onclick = function() { 
     ChangeMainImage.src = 'MainImage02.jpg'; 
    }; 
    document.getElementById('TN3').onclick = function() { 
     ChangeMainImage.src = 'MainImage03.jpg'; 
    }; 
    document.getElementById('TN4').onclick = function() { 
     ChangeMainImage.src = 'MainImage04.jpg'; 
    }; 
    document.getElementById('TN5').onclick = function() { 
     ChangeMainImage.src = 'MainImage05.jpg'; 
    }; 

    document.getElementById('TN6').onclick = function() { 
     ChangeMainImageAndDiv.src = 'MainImage06.jpg'; 
    }; 
    document.getElementById('TN7').onclick = function() { 
     ChangeMainImageAndDiv.src = 'MainImage07.jpg'; 
    }; 
    document.getElementById('TN8').onclick = function() { 
     ChangeMainImageAndDiv.src = 'MainImage08.jpg'; 
    }; 
    document.getElementById('TN9').onclick = function() { 
     ChangeMainImageAndDiv.src = 'MainImage09.jpg'; 
    }; 
    document.getElementById('TN10').onclick = function() { 
     ChangeMainImageAndDiv.src = 'MainImage10.jpg'; 
    }; 
}; 

我試着上傳的圖像的jsfiddle很好，但由於某種原因無法？！ 代碼存在問題，我基本上沒有在Javascript中有經驗能夠修復它。當縮略圖從橫向變爲縱向時，我正在嘗試更改CSS類。當縮略圖6被點擊時，我想運行名爲ChangeMainImageAndDiv的var。這將顯示正確的肖像圖像...

我知道這可以很容易地做到，而且在jQuery中的代碼少得多，但我真的想在學習JQuery之前學習Jscript。

謝謝你的幫助，我相信這對於一個知道自己在做什麼的人來說是一個簡單的解決方法。我做了谷歌這個，但不明白的代碼，因爲我看起來每個地方都有不同的做法！

Margate

Answer 1

看起來您還沒有將您的JavaScript文件鏈接到您的主要html文件呢？從你提供的代碼看來，這個javascript與html是同一個文件。如果你想這樣，你不能像這樣放置JavaScript，你需要圍繞javascript的<script>標籤。

有2種選擇可供選擇：

配售的JS在HTML文件中，就像您的代碼在這裏

你換你的整個JavaScript代碼是這樣的：

<script type="text/javascript"> 

window.onload = function() { 
    var ChangeMainImage = document.getElementById('Main'); 
var ChangeMainImageAndDiv = document.getElementById('Main').className = 
'MainImageContainerPort';; 
    document.getElementById('TN1').onclick = function() { 
     ChangeMainImage.src = 'MainImage01.jpg'; 
    }; 
    document.getElementById('TN2').onclick = function() { 
     ChangeMainImage.src = 'MainImage02.jpg'; 
    }; 
    document.getElementById('TN3').onclick = function() { 
     ChangeMainImage.src = 'MainImage03.jpg'; 
    }; 
    document.getElementById('TN4').onclick = function() { 
     ChangeMainImage.src = 'MainImage04.jpg'; 
    }; 
    document.getElementById('TN5').onclick = function() { 
     ChangeMainImage.src = 'MainImage05.jpg'; 
    }; 

    document.getElementById('TN6').onclick = function() { 
     ChangeMainImageAndDiv.src = 'MainImage06.jpg'; 
    }; 
    document.getElementById('TN7').onclick = function() { 
     ChangeMainImageAndDiv.src = 'MainImage07.jpg'; 
    }; 
    document.getElementById('TN8').onclick = function() { 
     ChangeMainImageAndDiv.src = 'MainImage08.jpg'; 
    }; 
    document.getElementById('TN9').onclick = function() { 
     ChangeMainImageAndDiv.src = 'MainImage09.jpg'; 
    }; 
    document.getElementById('TN10').onclick = function() { 
     ChangeMainImageAndDiv.src = 'MainImage10.jpg'; 
    }; 
}; 

</script> 

或者保存爲一個新的.js文件並將其鏈接到您的HTML文件

假設你整個的JavaScript另存爲新文件，ClickAndChange.js那麼你可以通過你的</body>標籤之前把這個

<script type="text/javascript" src="ClickAndChange.js" /> 

某個HTML文件鏈接到你的JavaScript文件。

此外，您<img id="Main" src="MainImage01.jpg" </img>代碼缺少一個>