将图像和文本设为默认值

Question

所以给我一个合适的标题我有点麻烦，所以请用你的输入纠正我。

点击我的问题（我添加了一张图片以便澄清）当我点击按钮1时，图片将显示在左侧，文本将显示在中间。 如果单击按钮2，则新图片将显示在左侧，并且新文本将显示在中间。

所以我的问题是：如何将按钮1设置为默认值，以便在加载网站时显示与该按钮相关的图片和文本。 我是JS的新手，请详细解释。 谢谢。 [！[

 function changeText(value) { var div = document.getElementById("div"); var text = ""; var image = ""; if (value == 1) text += "<span class='custom_text_h_w'>this is picture one</span> <br> <img class='custom_h_w' src='images/consumers_1.png'/>"; if (value == 2) text += "<span class='custom_text_h_w'>this is picture two</span> <br> <img class='custom_h_w' src='images/consumers_2.png'/>"; if (value == 3) text += "<span class='custom_text_h_w'>this is picture tree</span> <br> <img class='custom_h_w'src='images/consumers_3.png'/>"; div.innerHTML = text; } 

 .custom_h_w{ top: 1700px; left: 100px; height:456px; width: 342px; position: absolute; } .custom_text_h_w{ top: 1700px; right: 800px; position: absolute; } 

 <a href="javascript: changeText(1);"> <img id="searchconsumers" src="images/search.png" width="60px" height="60px" alt="abc" /> </a> <a href="javascript: changeText(2);"> <img id="exploreconsumers" src="images/explore.png" width="60px" height="60px" top="1700px" right="700px" alt="abc" /> </a> <a href="javascript: changeText(3);"> <img id="funconsumers" src="images/fun.png" width="60px" height="60px" alt="abc" /> </a> <div id="div"></div> 

Answer 1

您可以使用带有HTML body标签的页面启动JavaScript函数，如下所示：

<body onload="changeText(1);">

或者，您可以使用JavaScript执行相同的操作：

document.addEventListener('DOMContentLoaded', function() {
    changeText(1);
}

当页面在用户的浏览器中完成加载时，将触发'DOMContentLoaded'事件。

Answer 2

我不能评论（不是代表代表），但如果我理解你的问题，你只想在每次加载网站时显示你的“text1”和“picture1”，我是对的吗？

如果是的话，我有另一个问题。 除了我的第一个问题，您的代码是否正常工作并且正如您所希望的那样？

如果两者都是，只需将你的text1和picture1放在你的div上，然后用JS来改变值，或者你发短信“内容”和图片网址

Answer 3

你可以给你的图片链接a标识符，然后在DOMContentLoaded单击第一个以显示picture1和text1 ，使用document.querySelector('#p_1').click(); 检查下面的例子。

注意：如果您不想在代码中添加额外的标识符，可以直接选择frist锚点：

document.querySelectorAll('a')[0].click();

希望这可以帮助。

 document.addEventListener("DOMContentLoaded", function(event) { document.querySelector('#p_1').click(); }) function changeText(value) { var div = document.getElementById("div"); var text = ""; var image = ""; if (value == 1) text += "<span class='custom_text_h_w'>this is picture one</span> <br> <img class='custom_h_w' src='http://www.xerys.com/images/xerys/1.png'/>"; if (value == 2) text += "<span class='custom_text_h_w'>this is picture two</span> <br> <img class='custom_h_w' src='http://www.xerys.com/images/xerys/2.png'/>"; if (value == 3) text += "<span class='custom_text_h_w'>this is picture tree</span> <br> <img class='custom_h_w' src='http://www.xerys.com/images/xerys/3.png'/>"; div.innerHTML = text; } 

 .custom_h_w{ top: 120px; left: 100px; position: absolute; } .custom_text_h_w{ top: 70px; right: 200px; position: absolute; } 

 <a href="javascript: changeText(1);" id="p_1"> <img id="searchconsumers" src="images/search.png" width="40px" height="40px" alt="abc" /> </a> <a href="javascript: changeText(2);" id="p_2"> <img id="exploreconsumers" src="images/explore.png" width="40px" height="40px" alt="abc" /> </a> <a href="javascript: changeText(3);" id="p_3"> <img id="funconsumers" src="images/fun.png" width="40px" height="40px" alt="abc" /> </a> <div id="div"></div>