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正文标记的页面启动JavaScript函数，如下所示：

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

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

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

＆＃39; DOMContentLoaded＆＃39;当用户在浏览器中完成加载页面时，将触发事件。

Answer 2

我无法评论（不是代表代表），但如果我理解你的问题，你只想展示你的＃text;＆＃34; text1＆＃34;和＆＃34; picture1＆＃34;每次加载网站时，我是对的吗？

如果是的话，我有另一个问题。除了我的第一个问题之外，你的代码是否正常工作并且做得很好？

如果两者都是，只需将text1和picture1放在div上，然后使用JS更改值，或者发送文字＆＃34; content＆＃34;和图片网址

Answer 3

您可以在a上点击DOMContentLoaded标识符，然后picture1点击第一个标识符以显示text1和document.querySelector('#p_1').click();，并使用document.querySelectorAll('a')[0].click();检查以下示例。

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

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;
}

希望这有帮助。

＆＃13;

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

＆＃13;

<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>

＆＃13;

web.config

＆＃13;

将图片和文字设为默认

3 个答案: