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应该将背景更改为绿色。

单击第二个链接时，第二个p应将背景更改为绿色，依此类推。

基本上链接具有相同索引的不同类的相同元素。

我需要使用JAVASCRIPT代码来实现这一目标。

如何实现这一结果？

Jquery非常受欢迎。

Answer 1

您可以使用jQuery index()和eq()函数。

以下是一个例子：

$(".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 2

对于纯CSS解决方案，您可以通过向:target

提供p来使用伪类id和目标p

像这样：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

请检查代码可能会解决您的问题

谢谢

＆＃13;

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

＆＃13;

.buttons,
.weChangeColor {
  width: 50%;
  height: 100%;
  float: left;
}

.weChangeColor p {
  background: red;
  border: 1px solid;
}

.toggleColor {
  background: green !important;
}

＆＃13;

<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>

＆＃13;

Answer 4

尝试使用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>

或者使用类或ID或数据

如何链接相同的索引元素

4 个答案: