Question

我有以下代码：

<head>
<script>
        var specs = {
            'home' : {desc: 'Images/homeon.png', src:'Images/homeoff.png'},
            'about' : {desc: 'Images/aboutuson.png', src:'Images/aboutusoff.png'},
            'contact' : {desc: 'Images/contacton.png', src:'Images/contactoff.png'}
        }
        function toggleContent(footer)
        {
            document.getElementById('text').src = specs[footer].desc;
            document.getElementById('link').src = specs[footer].src;
        }
window.onload = function() {
    toggleContent("home");
}    
    </script>
</head>
<body>

<div id="product-toggle">
<img onclick="toggleContent('home')" src="Images/affinitynav.png" width="166" height="39">
<img onclick="toggleContent('about')" src="Images/ancienttalesnav.png" width="166" height="39">
<img onclick="toggleContent('contact')" src="Images/dhivenav.png" width="166" height="39">
</div>

<img src="" id="link">
<img src="" id="text">
</body>

我需要每个图像都处于关闭状态，因此用户知道它们的位置。基本上就像这里的图像https://docs.google.com/file/d/0B6X8uGoS_xDwMlo4V3d5VzluUHc/edit

Answer 1

window.onload = function() {
    toggleContent("home");
}

将其添加到脚本块的末尾。页面完成加载后，将执行此操作并设置默认图像。

Answer 2

<强> HTML

<div id="product-toggle">
<img onclick="toggleContent('home')" src="Images/affinitynav.png" width="166" height="39" id="home">
<img onclick="toggleContent('about')" src="Images/ancienttalesnav.png" width="166" height="39" id="about">
<img onclick="toggleContent('contact')" src="Images/dhivenav.png" width="166" height="39" id="contact">
</div>

<强>的javascript

    var specs = {
            'home' : {desc: 'Images/homeon.png', src:'Images/homeoff.png'},
            'about' : {desc: 'Images/aboutuson.png', src:'Images/aboutusoff.png'},
            'contact' : {desc: 'Images/contacton.png', src:'Images/contactoff.png'}
        }
        function toggleContent(footer)
        {
            var imgObj = document.getElementById('product-toggle').getElementsByTagName('img');
            for(var i=0;i<imgObj.length;i++) {
                imgObj[i].className = ""
            }
            document.getElementById(footer).className=footer+'active';
            document.getElementById('text').src = specs[footer].desc;
            document.getElementById('link').src = specs[footer].src;

        }
window.onload = function() {
    toggleContent('home')
}

jquery down state和Load default

2 个答案: