Показать текст в клике Внутри разных DIV

У меня есть три div. У одного div есть значок Twitter, у одного div есть значок LinkedIn, а последний div - там, где я хочу, чтобы текст отображал onclick.Показать текст в клике Внутри разных DIV

Я хочу, чтобы иметь возможность нажимать на значок Twitter и отображать текст в этом третьем div. Затем, если я нажму на значок LinkedIn, текст изменится и отобразит конкретный текст для LinkedIn. Это не фиды. Прямо сейчас я могу щелкнуть значок Twitter и текст будет отображаться, но он отображается под значком, и мне нужно его отобразить в третьем div, в котором говорится: «Сообщения идут здесь».

Главная страница .php.

Код для дивы является:

<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 { позиция: абсолютная; наверх: -9999px; левый: -9999px; } span { дисплей: нет; } #toggle: checked + span { дисплей: блок; \t img { cursor: указатель; } – dcwebcat

-1

Ниже приводится Javascript решение этой проблемы:

Прежде всего, пожалуйста provie идентификатор для каждого из Див-х годов. Скажем, first, second and third.

Теперь вы можете добавить onclick= "msg(first.value)" в первый div и onclick= "msg(second.value)" во второй div.

Определение сообщ (а): function msg(a){ third.innerHTML+=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: nth-child ((«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 '); }); }); – dcwebcat

В разделе HTML '' создайте тег '' – Pugazh

Я работаю с файлом PHP. – dcwebcat

-1

Этот сценарий может помочь вам. Третий 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>

источник

2016-03-21 14:27:12

Спасибо. Поскольку это PHP-документ, где я бы разместил jquery? – dcwebcat

Спасибо. Я понял. – dcwebcat

Вы также можете использовать jquery в документе php. –

Без JQuery:

триггер:

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

цель:

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

в ЯШ:

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

ответ

Смежные вопросы