JQuery How To Switch Between Colors By Change A Background Of Div By List Item ( Video Tutorial )

in #utopian-io • 8 years ago (edited)


Image Source

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

Curriculum


Posted on Utopian.io - Rewarding Open Source Contributors

#video #videotutorial #tutorial #programming
8 years ago in #utopian-io by
$0.15
3 votes
Reply 1
Sort:  
  • Trending
    • [-]
     8 years ago  

    Your contribution cannot be approved because it does not follow the Utopian Rules, and is considered as plagiarism. Plagiarism is not allowed on Utopian, and posts that engage in plagiarism will be flagged and hidden forever.

    • Simple and easy as well as ubiquitous
    • The same video

    You can contact us on Discord.
    [utopian-moderator]

    $0.00
      Reply