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

例如，你想显示id = 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">以下代码才能正常运行。

    Node* p = new Projectile();
    delete(p); //Projectile destructor is never called

更改div中的文本

4 个答案: