將圖片和文字設爲默認

因此，如果爲此提供適當的標題，我會遇到一些麻煩，所以請在輸入時糾正我的錯誤。將圖片和文字設爲默認

點擊我的問題（我添加了一張圖片以供澄清）當我點擊按鈕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

將圖片和文字設爲默認

回答

相關問題