jQuery Styling (Colorize Siblings) and JQuery Active Item (Tab Switching)

Question

Need some help with JQuery tasks please. You can find the task requirements outlined in the html below, but also here:

Taks one: When one of the \"li\"\'s is clicked:

Answer 1

this is actually pretty simple to do as you are using jQuery as you see in the following snippet. Nothing in the HTML / CSS was changed. How it is done is explained in the code.

And it is great, that you try coding, but on stackoverflow, you don't do Task 1, Task 2 etc. and copy the whole project code. Instead you just provide the code snippets needed and explain what your problem is that we can get the current situation. And yes, you explain a problem and don't just say "hi, do this and that". Share your thoughts and attempts for a specific problem.

Anyway, I hope I could help you. Have a nice day :)

// Task One
$(".color-list li").click(function() { // When a li is clicked
  var el = $(this); // Get the clicked Element
  var color = el.text(); // Get the Text of the li Element
  // Now set the Background of all Elements
  $(".color-list li").css("background-color", color);
  // And reset the font-weight and the uppercase
  $(".color-list li").css("font-weight", "normal");
  $(".color-list li").css("text-transform", "none");
  // Make the clicked element bold & uppercase
  el.css("font-weight", "bold");
  el.css("text-transform", "uppercase");
});


// Task Two

$(".tabs nav a").click(function() { // When a nav item is clicked
  var el = $(this); // Get the clicked Element
  var tab = el.attr("href"); // Get the ID from href
  // Reset all tab links
  $(".tabs nav li").removeClass("active");
  // And set the new one as active
  el.parent().addClass("active");
  // Hide all tabs
  $(".tabs-sections section").hide();
  // Show the current Tab
  $(tab).show();
});

        html {margin:2em; font-family:Helvetica, Arial, sans-serif;}
        h1 {margin:0;}
        h2 {color:#369;}
        hr {margin:2em 0;}
        .color-list {margin:0; padding:0; list-style:none;}
          .color-list li {margin:0.5em 0; padding:0.5em; color:#fff; border:1px solid #000; background-color:#000;}
          .color-list li:hover {cursor:pointer;}
        nav ul {margin:0; padding:0; list-style:none;}
          nav li {display:inline-block;}
          nav li a {display:block; padding:1em; color:#ccc; text-decoration:none; background-color:gray;}
          .tabs-sections {padding:0 1em; border:1px solid gray;}
          .active a {color:#000; background-color:lightgray;}
          .s2, .s3 {display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header><h1>Project 18</h1></header>

      <p><b>REMINDER:</b> Write only javascript. DO NOT modify the HTML or CSS.</p>

      <h2>Task One: Colorize Siblings</h2>
      <p>When one of the &quot;li&quot;&apos;s is clicked:</p>
      <ol>
        <li>Update the background color of all li&apos;s to the color value of the clicked &quot;li&quot;</li>
        <li>Make only the clicked item bold and uppercase</li>
      </ol>
      <ul id="colors" class="color-list">
        <li>red</li>
        <li>orange</li>
        <li>yellow</li>
        <li>green</li>
        <li>blue</li>
        <li>indigo</li>
        <li>violet</li>
      </ul>
      <script>
      // Task One code
      </script>

      <hr>

      <h2>Task Two: Tab Switching</h2>
      <p>Add the jQuery so that when a nav item is clicked:</p>
      <ol>
        <li>It becomes the active nav item (the light gray color)</li>
        <li>The content below switches to show the correct section</li>
      </ol>
      <p><b>NOTE:</b> the page should not try and anchor link down to the target section.</p>

      <div class="tabs">
        <nav>
          <ul>
            <li class="active"><a href="#one">One</a></li>
            <li><a href="#two">Two</a></li>
            <li><a href="#three">Three</a></li>
          </ul>
        </nav>

        <div class="tabs-sections">
          <section id="one" class="s s1">
            <h2>Section One</h2>
            <p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <i>quis nostrud exercitation ullamco</i> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </section>
          <section id="two" class="s s2">
            <h2>Section Two</h2>
            <p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <i>quis nostrud exercitation ullamco</i> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </section>
          <section id="three" class="s s3">
            <h2>Section Three</h2>
            <p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <i>quis nostrud exercitation ullamco</i> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </section>
        </div>
      </div>