https://steemitimages.com/0x0/http://ciappara.com/wp-content/uploads/2012/10/jquery-logo.jpg
[Image Source](https://steemitimages.com/0x0/http://ciappara.com/wp-content/uploads/2012/10/jquery-logo.jpg)

#### What Will I Learn?
I will learn how to switch between colors by change a background color of div element by clicking on an item of list .

- How to create the items and div with some CSS proprieties .
- How to use the ' eq ' with index of item and CSS to give them the colors .
- How to set the background color of the div by the color that you have in the list item

#### Requirements

- Basic knowledge of JavaScript language .
- Knowledge of JQuery .
- Has the min jquery file .
- Has an editor text .

#### Difficulty

- Basic

#### Description
In this video I will show you how to switch between colors , always I see this idea in many sites especially the watch sites you can browse the site by many colors ' red , green and blue ' for example and for that I want to give you this lesson today .
##### How to create the elements HTML and CSS :
Firstly I created unordered list has 4 elements and I created also a div to change the color ; after that I included some CSS proprieties to the list to change the width and height of elements and to give the div the gray background .
##### How to implement it in JQuery ? 
I brought the items list of our list in a variable named ' ul ' and I check if : 
- The first element the index equals to 0 I will change the background CSS propriety to red .
- The second element the index equals to 1 I will change the background CSS propriety to green.
- The third element the index equals to 2 I will change the background CSS propriety to blue.
- The fourth element the index equals to 3 I will change the background CSS propriety to black.
### What happens when I click on the color ?
I will select the div and go to the CSS and change the background color to the background of item that you clicked and I changed also the color to white .

#### Video Tutorial
https://www.youtube.com/watch?v=iRv7qwvIIhQ&feature=youtu.be

#### Curriculum

- [JQuery How To Show And Hide Password To Confirm It ' Convert Type ' ( Video Tutorial )
](https://utopian.io/utopian-io/@aymenz/jquery-how-to-show-and-hide-password-to-confirm-it-convert-type-video-tutorial)
- [JQuery Create a Scroll to Top Button Based by The Scroll Function ( Video Tutorial )
](https://utopian.io/utopian-io/@aymenz/jquery-create-a-scroll-to-top-button-based-by-the-scroll-function-video-tutorial)

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@aymenz/jquery-how-to-switch-between-colors-by-change-a-background-of-div-by-list-item-video-tutorial">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>