別のアイコンをクリックしたときのテキストコンテンツの変更

Question

私は自分のビジネスのためのウェブサイトを構築していますが、別々の細分を表す3つの異なるアイコンを持つセクションを作成しようとしています。

私はアイコンの下にテキストコンテンツがあります。アイコンをクリックすることに基づいて変更したいと思います。同様のセクションはthis websiteで見ることができます（「サービス」の部分にスクロールします）。

私は完全な初心者です。私はWordpressをDiviという多目的テーマで使用しています。私はjQuery（？）を使って同様の結果を得ることができたと思います。しかし、仕事が楽になるなら、プラグインを使っても構いません。

ご協力いただければ幸いです！

Answer 1

編集=>ブルーノ・コスが提案のように、私は他の誰かがそれが役に立つ

見つけ念のために私の答えを任せますが、あなたが、プラグインを使用する必要があり、あなたの初心者として、私は、プラグインではよく分からないが、プレーンテキストエディタであなたは、この（周りにあなたの頭を取得することが比較的容易な）試みることができる：http://js.do/code/131702ここ

//the Cartman image. Notice the onclick and how it launches the Cartman function below 
<img src="http://www.iconarchive.com/download/i33463/xtudiando/south-park/Cartman.ico" onclick="cartman()"> 

//the kenny image. This one launches the Kenny function 
<img src="http://icons.iconarchive.com/icons/xtudiando/south-park/128/Kenny-icon.png" onclick="kenny()"> 

//This is the p (paragraph) tag where we will inject our text 
<p id="text1"></p> 


<script> 

//This is some simple javascript. The first function is to inject the Kenny text between the <p></p> tags with the "id" "text1". 
function kenny(){ 
document.getElementById("text1").innerHTML = "Oh my god, you killed Kenny!"; 
} 

//this function injects the Cartman text 
function cartman(){ 
document.getElementById("text1").innerHTML = "Screw you guys I'm going home"; 
} 

</script> 

例を移動して、バイオリンを持っています！コピー/貼り付けを使用して、別の画像とテキストを追加できるかどうかを確認してください。

Answer 2

jQuery UIライブラリとその中のウィジェットの1つです。

https://jqueryui.com/tabs/

私はあなたのJSコード内のコンテンツを有するが、あなたのポスト/ページブロックの可視性をトグルすることによってだけでなく、幸せになると思います。それは編集可能な簡単なコンテンツを持つことができます。

jQueryのUIは人気がありますが、余分なプラグインを使用することなく作成することができます。一例として、

：

$(document).ready(function(){ 
 
    $('.tabToggler').on('click', function(e){ 
 
    e.preventDefault(); 
 

 
    var $tabToggler = $(e.target); 
 
    var $tabId = $tabToggler.data('id'); 
 

 
    $('.tab').hide(); 
 
    $('.tab[data-id="' + $tabId + '"]').show(); 
 
    }) 
 
});

.tabToggler { 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 30px; 
 
    font-size: 10px; 
 
    color: #fff; 
 
    font-family: sans-serif; 
 
    text-decoration: none; 
 
} 
 

 
.tabToggler[data-id="1"]{ 
 
    background:red 
 
} 
 

 
.tabToggler[data-id="2"]{ 
 
    background:green 
 
} 
 

 
.tabToggler[data-id="3"]{ 
 
    background:blue 
 
} 
 

 
.tab { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="#" class="tabToggler" data-id="1">First ICO</a> 
 
<a href="#" class="tabToggler" data-id="2">Second ICO</a> 
 
<a href="#" class="tabToggler" data-id="3">Third ICO</a> 
 

 
<div class="tab" data-id="1">Content 1</div> 
 
<div class="tab" data-id="2">Content 2</div> 
 
<div class="tab" data-id="3">Content 3</div>

あなたは、私はそれで私の答えを更新することができ、いくつかの余分な説明が必要な場合。

Answer 3

ワードプレスを使用しているため、タブを表示するためにjQueryを処理する必要はありません。あなたがそれらのタブに使用できるプラグインの

の例では、いずれの場合においてもTabby Responsive Tabs

で、タブキーワードはあなたが探しているもので、あなたは任意の無料またはプレミアム、あなたは完全な初心者であることを言っているので、タブプラグインはあなたのために仕事をする必要があります。