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。

感谢您的帮助，我相信对于知道自己在做什么的人来说，这是一个简单的解决方案。我做谷歌这个，但是不明白代码，因为我看的每个地方有不同的做法！

马盖特

Answer 1

您好像还没有将javascript文件链接到主html文件？从你提供的代码看来，javascript与html在同一个文件中。如果你想这样你就不能像这样放置javascript，你需要一个围绕javascript的<script>标签。

有两种选择：

将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然后您可以通过放置此链接将html文件链接到您的javascript文件

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

在</body>代码之前的某个地方。

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

点击使用Javascript更改CSS类？

1 个答案: