更改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中的文本

回答

相關問題