Изменение текста в div

Question

Моей целью является то, что я нажимаю на каждую фотографию, которые теперь не отображаются (но вы можете увидеть значок разбитого изображения) внутри этого div «core-tab-sec». должен измениться. Теперь вы видите три абзаца, и каждый из них предназначен для одной из фотографий. Поэтому два из них должны быть скрыты, и только один отображается.

Может ли кто-нибудь помочь мне с этим? Так вот все из моего кода https://jsfiddle.net/net1994/7zovyuow/

<div class="core-tab-sec"> 
<ul class="core-tabNav"> 
<li class="active"><a href="#tab1"><figure><img src="<?php bloginfo('template_url'); ?>/img/people-icon.png" alt="PEOPLE"></figure><div>PEOPLE</div></a></li> 
<li><a href="#tab2"><figure><img src="<?php bloginfo('template_url'); ?>/img/passion-icon.png" alt="PASSION"></figure><div>PASSION</div></a></li> 
<li><a href="#tab3"><figure><img src="<?php bloginfo('template_url'); ?>/img/performance.png" alt="PERFORMANCE"></figure><div>PERFORMANCE</div></a></li> 
</ul> 

    <div class="core-tabCnt"> 
     <div class="core-tabSec" id="tab-1"> 
     <p>We believe in people. People solve problems. Our employees are passionate problem solvers always looking for long-term solutions that will benefit our clients and OneIMS. They thrive in and promote a collaborative and innovative environment, working hard to achieve corporate goals.</p> 
     </div> 
     <div class="core-tabSec" id="tab2"> 
     <p>We could not be a marketing company without being passionate about innovation. From keeping up with industry changes to using the latest techniques, our creativity and passion drives innovation that helps our clients achieve their goals.</p> 
     </div> 
     <div class="core-tabSec" id="tab3"> 
     <p>The success of our clients is driven by results. Results are driven by our performance. That’s why we relentlessly pursue success, strive for flawless execution, work hard and continuously look for ways to maximize our client’s return on investment. </p> 
     </div> 
    </div> 

</div> 

Как это сделать? Могу ли я сделать css или js? Спасибо!

Answer 1

, например, вы хотите показать, Ид = TAB2 и остальные это скрывают просто использовать {$('.core-tabSec').hide(); $('#tab2').show();

}

Answer 2

Вы можете сделать это с помощью JQuery. На щелчке изображения/ссылка связать даже который добавить/удалить классы из абзацев

$(".core-tabNav li a").click(function() { 
    $(this).addClass('show'); 
}); 

и определить класс в CSS, чтобы переключить дисплей

display: block/display: none 

Answer 3

Вы можете использовать JQuery. Пожалуйста, проверьте работает полный jsfiddle example here

 $('.core-tabNav li').each(function(e){ 
     $(this).find('a').on('click', function(){ 
     var paragraphID = $(this).attr('href'), 
       pragraph = $(paragraphID); 

      hideAll(); 

       pragraph.show('fast'); 
         console.log(pragraph); 
     }); 

    }); 
    function hideAll(){ 
     $('.core-tabSec').hide(); 
    } 

Answer 4

Пожалуйста, проверьте код, приведенный ниже в JQuery. Вы должны включить скрипт src = "// code.jquery.com/jquery-1.12.0.min.js"> для правильного запуска приведенного ниже кода.

$(document).ready(function() { 
    $("img").click(function() { 
    if($(this).attr('alt') === 'PEOPLE') { 
     $('.core-tabSec').hide(); 
     $('#tab-1').show(); 
    } 
    else if($(this).attr('alt') === 'PASSION') { 
     $('.core-tabSec').hide(); 
     $('#tab2').show(); 
    } 
    else { 
     $('.core-tabSec').hide(); 
     $('#tab3').show(); 
    } 
    }); 
});