javascript - 使用 Javascript 单击更改 CSS 类？

Question

我试图在点击时更改 CSS 类。这是 fiddle : 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。

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

马盖特

Answer 1

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

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

假设您将整个 javascript 保存为一个新文件 ClickAndChange.js 然后您可以将 html 文件链接到您的 javascript 文件

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

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

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