2

我正在尝试更改单击时的 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 的变量。这将正确显示肖像图像...

我知道这可以很容易地完成，并且在 jQuery 中使用更少的代码，但我真的想在学习 JQuery 之前学习 Jscript。

感谢您的帮助，我相信对于知道自己在做什么的人来说，这很容易解决。我在谷歌上做了这个，但不理解代码，因为我看到的每个地方都有不同的方法！

马盖特

4

1 回答 1

1

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

有 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，那么您可以通过放置这个来将 html 文件链接到您的 javascript 文件

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

</body>标签之前的某个地方。

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

于 2013-05-05T17:25:10.613 回答