Question

我有点卡在这里，并希望被放在正确的道路上。基本上我有一个带有颜色名称的li列表，一旦点击其中一个框，我需要所有的li来改变背景颜色到点击的颜色，并且点击的li变成粗体和大写。

如何获取所点击的li的值并将其应用于兄弟姐妹？（必须使用jquery / javascript，不能修改html）

谢谢！

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Project 18</title>
  <style>
    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;}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
  <header><h1>Project 18</h1></header>
  <h2>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>

  // code
  </script>

  <hr>

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

  <script>
  // code
  </script>

</body>
</html>

Answer 1

$('.color-list').on("click",  function (e) {
    $('.color-list').children().css("background-color", $(e.target).text());
    $('.color-list').children().css("font-weight", "");
    $(e.target).css("font-weight", "bold");
    $('.color-list').children().css("text-transform", "");
    $(e.target).css("text-transform", "uppercase");
});

希望有所帮助：）

如何使用点击的li的价值来设计李的风格？

1 个答案: