Изменить класс CSS на клик, используя Javascript?

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, я хочу запустить var с именем ChangeMainImageAndDiv. Это правильно отобразит портретные изображения ...

Я знаю, что это можно сделать очень легко и с гораздо меньшим количеством кода в jQuery, но я действительно хочу изучить Jscript, прежде чем я узнаю JQuery.

Спасибо за любую помощь, я уверен, что это легкое решение для тех, кто знает, что они делают. Я сделал это Google, но не понимал коды, так как каждый, где я смотрел, имел другой способ сделать это!

Маргит

Answer 1

кажется, что вы не связать файл JavaScript с вашим основным HTML файла еще? Из кода, который вы предоставляете, кажется, что javascript находится в том же файле, что и html. Если вы так хотите, вы не можете заложить javascript, как это, вам понадобится тег <script>, окружающий javascript.

Есть 2 варианта на выбор:

Размещение JS в HTML файл, как ваш код здесь

Вы завернуть весь яваскрипта код, как это:

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

Or сохранить как новый .js-файл и связать его с вашим html-файлом

Предположим, что вы сохраните всю JavaScript в качестве нового файла, ClickAndChange.js, то вы можете связать файл HTML для вашего файла JavaScript, помещая этот

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

где-то до вашего </body> тега.

Кроме того, ваш <img id="Main" src="MainImage01.jpg" </img> код отсутствует один >