请咨询JQuery任务。您可以在下面的html中找到任务要求，但也可以在此处找到：
Taks one： 当点击其中一个＆＃34; li＆＃34;时，
将所有li的背景颜色更新为所点击的＆＃34; li＆＃34;的颜色值。 只使点击的项目为粗体和大写
任务二： 添加jQuery，以便在单击导航项时：
它成为活动导航项（浅灰色） 下面的内容切换为显示正确的部分 注意：页面不应尝试将链接锚定到目标部分。
<!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>
<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 "li"'s is clicked:</p>
<ol>
<li>Update the background color of all li's to the color value of the clicked "li"</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>
<script>
// Task Two code
</script>
</body>
</html>
答案 0 :(得分：1)
实际上，这很简单，因为您在使用jQuery，如下面的代码片段所示。 HTML / CSS中的任何内容均未更改。代码中说明了如何完成。
尝试编码是一件很不错的事，但是在stackoverflow上，您不执行任务1，任务2等，而是复制整个项目代码。相反，您只需要提供所需的代码段，并说明您遇到的问题是我们可以了解当前情况。是的，您可以解释一个问题，而不仅仅是说“嗨，做到这一点”。分享您对特定问题的想法和尝试。
无论如何，希望我能为您提供帮助。祝你有美好的一天：）
// 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 "li"'s is clicked:</p>
<ol>
<li>Update the background color of all li's to the color value of the clicked "li"</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>