Question

我有三个div。一个div有一个Twitter图标，一个div有一个LinkedIn图标，最后一个div是我希望文本显示onclick的地方。

我希望能够点击Twitter图标并在第三个div中显示文本。然后，如果我点击LinkedIn图标，文本将会更改并显示LinkedIn的特定文本。这些不是饲料。现在我可以点击Twitter图标，文本会显示但是它会显示在图标下面，我需要它显示在第三个显示“帖子去这里”的div中。

主页是.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>

Answer 1

检查以下代码段。

＆＃13;

longest

＆＃13;

$(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');
  });
});

＆＃13;

Answer 2

没有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';
});

Answer 3

以下是对此的javascript解决方案：

首先，请为每个div提供一个iD。我们先说first, second and third。

现在，您可以将onclick= "msg(first.value)"添加到第一个div，将onclick= "msg(second.value)"添加到第二个div。

msg（a）的定义： function msg(a){ third.innerHTML+=a;}

HoPe这有帮助！

Answer 4

此脚本可能对您有所帮助。第三个div位于底部。

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

单击里面显示文本不同的DIV

4 个答案: