點擊內部顯示文本不同的DIV

我有三個div。一個div有一個Twitter圖標，一個div有一個LinkedIn圖標，最後一個div是我希望文本顯示的地方onclick。點擊內部顯示文本不同的DIV

我希望能夠點擊Twitter圖標並在第三個div中顯示文本。然後，如果我點擊LinkedIn圖標，文本將會更改並顯示LinkedIn的特定文本。這些不是飼料。現在我可以點擊Twitter圖標，文本將顯示，但它顯示在圖標下方，我需要它顯示在第三個div中，顯示「Posts Go Here」。

主頁是.php。

代碼的div是：

<div class="capamb-row-padding"> 
    <div class="capamb-third"> 
     <p><label for="toggle"> 
     <img src="/images/capambassador/capamb-twitter-icon.png" width="75" height="75" /> 
     </label> 
     <input type="checkbox" id="toggle" /> 
     <span>your text here</span> 
    </div> 

    <div class="capamb-third"> 
     <p><img src="/images/capambassador/capamb-linkedin-icon.png" width="75" height="75" /></p> 
    </div> 

    <div class="capamb-third"> 
     <h2>Tweets</h2> 
     <p>Posts Go Here</p> 
    </div> 
</div>

來源

2016-03-21 dcwebcat

您能否顯示用於顯示文本的代碼？這將有助於準確回答。 –

當你點擊圖標/圖像時，生成的文本將是靜態的，或者它會保持更改？ – Ramkee

忘了包括我的CSS： #toggle { position：absolute; top：-9999px; left：-9999px; } span { display：none; } #toggle：checked + span { display：block; \t } img { cursor：pointer; } – dcwebcat

-1

下面是一個JavaScript解決這個：

首先，請延誤，本公司的ID每div的的。比方說first, second and third。

現在您可以將onclick= "msg(first.value)"添加到第一個div，並將onclick= "msg(second.value)"添加到第二個div。 function msg(a){ third.innerHTML+=a;}

希望這有助於：

MSG（A）的定義！

來源

2016-03-21 14:21:50 anshabhi

檢查下面的代碼片段。

$(function() { 
 
    $('img[alt="twitter"]').click(function() { 
 
    $('div.capamb-third:nth-child(3) h2').text('Tweets'); 
 
    $('div.capamb-third:nth-child(3) p').text('Twitter Posts Go Here'); 
 
    }); 
 
    $('img[alt="linkedin"]').click(function() { 
 
    $('div.capamb-third:nth-child(3) h2').text('Posts'); 
 
    $('div.capamb-third:nth-child(3) p').text('LinkedIn Posts Go Here'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="capamb-row-padding"> 
 
    <div class="capamb-third"> 
 
    <p> 
 
     <label for="toggle"> 
 
     <img src="/images/capambassador/capamb-twitter-icon.png" width="75" height="75" alt="twitter" /> 
 
     </label> 
 
     <input type="checkbox" id="toggle" /> 
 
     <span>your text here</span> 
 
    </div> 
 
    <div class="capamb-third"> 
 
    <p> 
 
     <img src="/images/capambassador/capamb-linkedin-icon.png" width="75" height="75" alt="linkedin" /> 
 
    </p> 
 
    </div> 
 
    <div class="capamb-third"> 
 
    <h2>Tweets</h2> 
 
    <p>Posts Go Here</p> 
 
    </div> 
 
</div>

來源

2016-03-21 14:25:33 Pugazh

謝謝。我會試試這個。我應該在哪裏放置： '$（function（）{（'img [alt =「twitter」]'）。click（function（）{（'div.capamb-third：nnth-child 3）h2'）。text（'Tweets'）; $（'div.capamb-third：n-child（3）p'）。text（'Twitter Posts Go Here'）; }）; $ ''點擊（功能（）{（'div.capamb-third：nth-child（3）h2'）。text（'Posts'）; $（'div .capamb-third：n-child（3）p'）。text（'LinkedIn Posts Go Here'）; }）; }）;' – dcwebcat

在您的HTML''部分，創建一個標籤'' – Pugazh

我正在使用PHP文件。 – dcwebcat

-1

該腳本可以幫助你。第三格在底部。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>your title</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
</head> 
 
<div class="capamb-row-padding"> 
 
    <div class="capamb-third" id='one'> 
 
    <p> 
 
     <label for="toggle"> 
 
     <img src="https://g.twimg.com/Twitter_logo_blue.png" width="75" height="75" /> 
 
     </label> 
 
     <input type="checkbox" id="toggle" /> 
 
     <span>your text here</span> 
 
    </div> 
 
    <div class="capamb-third" id='two'> 
 
    <p> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/LinkedIn_logo_initials.png/768px-LinkedIn_logo_initials.png" width="75" height="75" /> 
 
    </p> 
 
    </div> 
 
    <div class="capamb-third" id='three'> 
 
    
 
    </div> 
 
</div> 
 
<script> 
 
$("#one").click(function(){ 
 
    $("#three").html("<h2>Tweets</h2><br><p>Tweets go here</p>"); 
 
}); 
 
$("#two").click(function(){ 
 
    $("#three").html("<h2>Linkedin</h2><br><p>Posts Go Here</p>"); 
 
}); 
 
</script> 
 
</body> 
 
</html>

來源

2016-03-21 14:27:12

謝謝。由於這是一個PHP文檔，我會在哪裏放置jQuery？ – dcwebcat

謝謝。我想到了。 – dcwebcat

你也可以在php文檔中使用jquery。 –

沒有jQuery的：

觸發：

<img id="trigger" src="/images/capambassador/capamb-twitter-icon.png" width="75" height="75" />

目標：

<p id="hidden-text">Posts Go Here</p>

的JS：

var trigger = document.getElementById('toggle'), 
    hidden = document.getElementById('hidden-text'); 

trigger.addEventListener('click', function(){ 
    hidden.style.display = 'block'; 
});

來源

2016-03-21 14:34:45

點擊內部顯示文本不同的DIV

回答

相關問題