同じインデックスの要素

Question

.buttons, 
 
.weChangeColor { 
 
    width: 50%; 
 
    height: 100%; 
 
    float: left; 
 
} 
 

 
.weChangeColor p { 
 
    background: red; 
 
    border: 1px solid; 
 
} 
 

 
.toggleColor { 
 
    background: green; 
 
}

<div class="buttons"> 
 
    <p><a href="#">FirstLink</a></p> 
 
    <p><a href="#">SecondLink</a></p> 
 
    <p><a href="#">ThirdLink</a></p> 
 
</div> 
 

 
<div class="weChangeColor"> 
 
    <p>FirstPara</p> 
 
    <p>SecondPara</p> 
 
    <p>ThirdPara</p> 
 
</div>

上記のコードで

は、最初linkがクリックされた場合、p最初は緑に背景を変更する必要があり、ということです。

2番目のリンクをクリックすると、2番目のpは、背景を緑色に変更する必要があります。

同じインデックスを持つ異なるクラスの同じ要素を基本的にリンクします。

私はこれを達成するために必要なJAVASCRIPTコードが必要です。

この結果はどのように達成できますか？

Jqueryは大歓迎です。

Answer 1

コードはあなたの問題を解決する可能性があります

おかげ

jQuery('.buttons p').click(function(){ 
 
    var ClickedElemenet = jQuery(this).index(); 
 
    var GetElement = jQuery('.weChangeColor p').get(ClickedElemenet); 
 
    jQuery(GetElement).toggleClass('toggleColor'); 
 
});

.buttons, 
 
.weChangeColor { 
 
    width: 50%; 
 
    height: 100%; 
 
    float: left; 
 
} 
 

 
.weChangeColor p { 
 
    background: red; 
 
    border: 1px solid; 
 
} 
 

 
.toggleColor { 
 
    background: green !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="buttons"> 
 
    <p><a href="#">FirstLink</a></p> 
 
    <p><a href="#">SecondLink</a></p> 
 
    <p><a href="#">ThirdLink</a></p> 
 
</div> 
 

 
<div class="weChangeColor"> 
 
    <p>FirstPara</p> 
 
    <p>SecondPara</p> 
 
    <p>ThirdPara</p> 
 
</div>

Answer 2

は、このようなjQueryを使ってJSでそれを作ってみる：

jQuery('.buttons p').click(function(){ 
 
    jQuery('.weChangeColor p').eq($(this).index()).toggleClass('toggleColor'); 
 
});

.buttons, 
 
.weChangeColor { 
 
    width: 50%; 
 
    height: 100%; 
 
    float: left; 
 
} 
 

 
.weChangeColor p { 
 
    background: red; 
 
    border: 1px solid; 
 
} 
 

 
.weChangeColor p.toggleColor { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="buttons"> 
 
    <p><a href="#">FirstLink</a></p> 
 
    <p><a href="#">SecondLink</a></p> 
 
    <p><a href="#">ThirdLink</a></p> 
 
</div> 
 

 
<div class="weChangeColor"> 
 
    <p>FirstPara</p> 
 
    <p>SecondPara</p> 
 
    <p>ThirdPara</p> 
 
</div>

か、jQueryのindex()とeq()機能を使用することができますクラスやIDやデータ

Answer 3

でそれを作ります。ここで

は一例です：

あなたはこのように各 p

にidを与えることによって疑似クラス:targetを使用してpをターゲットにすることができ、純粋なCSSのソリューションについては

$(".buttons p").click(function(){ 
 
    $(".weChangeColor p").eq($(this).index()).toggleClass("toggleColor"); 
 
    $(this).toggleClass("toggleColor"); 
 
});

.buttons, 
 
.weChangeColor { 
 
    width: 50%; 
 
    height: 100%; 
 
    float: left; 
 
} 
 

 
.weChangeColor p { 
 
    background: red; 
 
    border: 1px solid; 
 
} 
 

 
p.toggleColor { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="buttons"> 
 
    <p><a href="#">FirstLink</a></p> 
 
    <p><a href="#">SecondLink</a></p> 
 
    <p><a href="#">ThirdLink</a></p> 
 
</div> 
 

 
<div class="weChangeColor"> 
 
    <p>FirstPara</p> 
 
    <p>SecondPara</p> 
 
    <p>ThirdPara</p> 
 
</div>

Answer 4

：

.buttons, 
 
.weChangeColor { 
 
    width: 50%; 
 
    height: 100%; 
 
    float: left; 
 
} 
 

 
:target { 
 
    background: green; 
 
}

<div class="buttons"> 
 
    <p><a href="#p1">FirstLink</a></p> 
 
    <p><a href="#p2">SecondLink</a></p> 
 
    <p><a href="#p3">ThirdLink</a></p> 
 
</div> 
 

 
<div class="weChangeColor"> 
 
    <p id="p1">FirstPara</p> 
 
    <p id="p2">SecondPara</p> 
 
    <p id="p3">ThirdPara</p> 
 
</div>