使用Javascript在单击时更改CSS类？

我试图改变一个CSS类点击。这是小提琴：

window.onload=函数（）{
var ChangeMainImage=document.getElementById（'Main'）；
var ChangeMainImageAndDiv=document.getElementById（'Main'）。类名=
“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'；
};
};

我也尝试过将图片上传到JSFIDLE，但由于某种原因无法上传？！ 代码有一个问题，我基本上没有Javascript方面的经验来修复它。当缩略图像从横向变为纵向时，我试图改变CSS类。单击缩略图6时，我希望运行名为ChangeMainImageAndDiv的变量。这将正确显示纵向图像

我知道这可以很容易地完成，而且jQuery中的代码要少得多，但我真的想在学习jQuery之前先学习Jscript

谢谢你的帮助，我相信这对那些知道自己在做什么的人来说是一个很容易解决的问题。我用谷歌搜索了一下，但不理解代码，因为我看的每个地方都有不同的方法

---

Margate

您似乎还没有将javascript文件链接到主html文件？从您提供的代码来看，javascript似乎与html位于同一个文件中。如果你想这样做，你不能像这样放置javascript，你需要一个

标记围绕javascript

有两种选择：

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

window.onload=函数（）{
var ChangeMainImage=document.getElementById（'Main'）；
var ChangeMainImageAndDiv=document.getElementById（'Main'）。类名=
“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'；
};
};

或另存为新的.js文件并将其链接到html文件

假设您将整个javascript保存为一个新文件，单击并更改.js，然后您可以通过放置以下内容将html文件链接到javascript文件

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

在您的

标记之前的某个位置

---

另外，您的

代码缺少一个

这可能就是您要找的：您好，萨贡，谢谢您的帮助。我已经更新了fiddle，我忽略了>end标记，因为我主要关注的是JS。标记&在文件中，但是我从jsiddle复制了上面的代码，在这个过程中忽略了脚本标记。我想我只需要一种方法，在上面的代码中添加多个var或多个函数。然后我可以更改CSS样式onClick。

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