更改div中的文本

我的目标是一旦我点击每个照片 - 现在不显示（但你可以看到破碎的图像图标）这个div内的文本“core-tab-sec” 应该改变。你现在看到三段，每段都是为了一张照片。所以他们中的两个应该被隐藏，只有一个被显示。更改div中的文本

任何人都可以帮助我吗？因此，这里是我的所有代码 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吗？谢谢！

来源

2016-02-03 An K

份额，你已经尝试 –

你可以在CSS隐藏和显示创建两个类，并添加，并根据点击图片 –

比如你想显示ID = TAB2和剩下的就是隐藏只使用 {$('.core-tabSec').hide(); $('#tab2').show();

}

来源

2016-02-03 05:28:13

非常感谢你删除的段落DIV这些类的脚本！ –

-1

为此，您可以使用jQuery。在图像的点击/链路绑定一个即使是添加/从你的段落

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

删除类和类定义在CSS中切换显示

display: block/display: none

来源

2016-02-03 05:38:14 user2947

非常感谢！ –

-1

您可以使用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(); 
    }

来源

2016-02-03 05:47:11

谢谢谢谢谢谢，非常感谢你Kamaal！我现在要学习这个！ –

-1

请检查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(); 
    } 
    }); 
});

来源

2016-02-03 05:53:20 Shubhra

非常感谢！ –

更改div中的文本

回答

相关问题