Javascript 如何设计li的使用价值？_Javascript_Jquery_Css

Javascript 如何设计li的使用价值？

javascript jquery css

Javascript 如何设计li的使用价值？,javascript,jquery,css,Javascript,Jquery,Css,我有点被困在这里了，如果能让我走上正确的道路，我将不胜感激。基本上，我有一个带有颜色名称的li列表，单击其中一个框后，我需要所有li将背景颜色更改为单击的颜色，并使单击的li变为粗体大写如何获取单击的li的值并将其应用于兄弟姐妹？必须使用jquery/javascript，不能修改html 谢谢 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <titl

我有点被困在这里了，如果能让我走上正确的道路，我将不胜感激。基本上，我有一个带有颜色名称的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>

希望有帮助：

请展示您的尝试。提示：$this.text将是单击项目的内容。这看起来像家庭作业。我建议你做些研究并尝试一下。如果你陷入困境，请告诉我们你尝试了什么，具体出了什么问题。@Barmar，我会试试看，让你看看我有什么。在一个没有经验的新手网络课程中，几乎不知道如何开始。谢谢这不是他们在课堂上教的吗？是和不是。教授基本上教基础知识，然后我们必须自己解决其余的问题。谢谢你，这真的很有效，谢谢！！不客气。如果可以，请将答案标记为已接受：

$('.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");
});