Tips for connecting elements at the same index

Question

Tips for connecting elements at the same index

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

By clicking on the links above, I want each corresponding paragraph to change its background color to green dynamically using JavaScript.

I am looking for the JavaScript code that will achieve this functionality.

If possible, jQuery can also be used to accomplish this task.

javascript jquery html css

Answer 1

Answer №1

To achieve this functionality, you can utilize the jQuery index() and eq() methods.

Below is a demonstration:

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

To achieve this functionality, you can utilize the jQuery index() and eq() methods.

Below is a demonstration:

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

Answer №2

If you are experiencing issues, please review the following code snippet:

Thank you

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 4

If you are experiencing issues, please review the following code snippet:

Thank you

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 5

Answer №3

To achieve a pure CSS solution, you can utilize the pseudo-class :target to target p elements by assigning an id to each of them.

Here's an example:

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

Answer 6

To achieve a pure CSS solution, you can utilize the pseudo-class :target to target p elements by assigning an id to each of them.

Here's an example:

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

Answer 7

Answer №4

One way to implement this functionality in JavaScript using jQuery is as follows:

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>

Alternatively, you can achieve the same result by utilizing classes, IDs, or data attributes.

Answer 8

One way to implement this functionality in JavaScript using jQuery is as follows:

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>

Alternatively, you can achieve the same result by utilizing classes, IDs, or data attributes.

Tips for connecting elements at the same index

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for defining a dynamic class variable in React with Flow

Distinguishing between native and custom error objects: a comprehensive guide

Alteration of Content Height Input

align items center with respect to my central element

Angular form displayed on the screen

Arranging Elements Using CSS

What is the best way to make a hyperlink in HTML open in the same page or window, without relying on the <iframe> tag or JavaScript?

In Google Chrome, the :after element on the left is cleared, while other browsers do not

"Kindly complete all mandatory fields" - The undisclosed field is preventing me from submitting

Issue: (SystemJS) XHR error (404) encountered in Angular2 Plnkrsandbox

What is the best way to line up three divs horizontally and center the contents inside each one?

Tips for eliminating the page margin in Java when converting HTML using iTextPdf with HTMLConverter

Increasing numerical values within an array using JavaScript

Directive in Angular for customer management with filtering and sorting functionality

Why does the lazy loading feature keep moving the background image around?

Guide on retrieving information from Spark and showcasing it through Angular

Building interactive web forms with real-time validation using CodeIgniter

Text is not visible when hovering over it

Activate the search feature in select2 to allow multiple selections

Changing background color during drag and drop in Angular 2: A step-by-step guide