将图片和文字设为默认

因此，如果为此提供适当的标题，我会遇到一些麻烦，所以请在输入时纠正我的错误。将图片和文字设为默认

点击我的问题（我添加了一张图片以供澄清）当我点击按钮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>

来源

2016-09-06 Thomas Varberg

您可以用HTML body标签像这样的开始页面中的JavaScript函数：

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

或者，你可以使用JavaScript做同样的事情：

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

'DOMContentLoaded'事件将在页面完全加载完毕后触发用户的浏览器。

来源

2016-09-06 17:14:24 petryuno1

<体的onload = “changeText（1）;”>一团糟我的一些其它码和document.addEventListener（ 'DOMContentLoaded'，函数（）{ changeText（1）; }你也有同样的建议吗？你有其他建议吗？ –

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

如果是这样，我还有一个问题。你的代码是否正在工作，并且除了我的第一个问题之外还在做什么？

如果是这两个，只是把你的text1和图片1你的DIV，然后用JS来改变这些值，也文本“内容”和图片的URL

来源

2016-09-06 17:15:04

嗨。谢谢你的回复。是的，我可以对两者都说是。如果我把它放在我的div上，然后点击按钮2（显示图片2和文本2）仍然改变呢？ –

现在它的工作 - 谢谢你的努力 –

很高兴我能帮忙;） –

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

注：如果你不想在你的代码中添加额外的标识，你可以选择弗里斯特锚直接usisng：

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>

来源

2016-09-07 14:41:19

将图片和文字设为默认

回答

相关问题