jQuery样式(为同级兄弟着色)和jQuery活动项(制表符切换) [英] jQuery Styling (Colorize Siblings) and JQuery Active Item (Tab Switching)
本文介绍了jQuery样式(为同级兄弟着色)和jQuery活动项(制表符切换)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
请在JQuery任务上需要一些帮助.您可以在下面的html中找到概述的任务要求，也可以在这里找到:
回答一:单击"li"之一时:
将所有li的背景颜色更新为单击的"li"的颜色值仅使单击的项目为粗体和大写
任务二:添加jQuery，以便在单击导航项时:
它成为活动的导航项目(浅灰色)下面的内容切换为显示正确的部分注意:该页面不应尝试将链接锚定到目标部分.
<！doctype html>< html lang ="zh-CN">< head>< meta charset ="utf-8">< title>项目18</title>< style>html {margin:2em;字体家族:Helvetica，Arial，无衬线；}h1 {margin:0;}h2 {color:#369;}hr {margin:2em 0;}.color-list {margin:0;填充:0;list-style:无；}.color-list li {margin:0.5em 0;填充:0.5em;颜色:#fff;边框:1px实线#000；背景颜色:#000;}.color-list li:hover {cursor:pointer;}nav ul {margin:0;填充:0;list-style:无；}nav li {display:inline-block;}nav li a {display:block;padding:1em;颜色:#ccc;文字修饰:无；背景色:灰色；}.tabs-sections {padding:0 1em;边框:1px纯灰色；}.active a {color:#000;背景色:浅灰色；}.s2，.s3 {display:none;}</style>< script src ="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script></head><身体>< header< h1>项目18</h1>/header>< p> b>提醒:</b>只写JavaScript.</p>请勿修改HTML或CSS.< h2>任务一:为兄弟姐妹着色</h2>< p>当单击& li"之一时:</p>< ol>< li>将所有li的背景颜色更新为所单击的" li&"/li>的颜色值.< li>仅使所单击的项目为粗体和大写</li></ol>< ul id ="colors" class ="color-list">< li> red</li>< li>橙色</li>< li>黄色</li>< li>绿色</li>< li>蓝色</li>< li&indigo</li>< li"紫罗兰色//li></ul>< script>//任务一代码</script>< hr>< h2>任务二:标签切换</h2>< p>添加jQuery，以便在单击导航项时:</p>< ol>< li>变成活动的导航项目(浅灰色).< li>下面的内容切换为显示正确的部分</li>.</ol>< p< b>注:</b>该页面不应尝试将链接锚定到目标部分.< div class ="tabs">< nav>< ul>< li class ="active">< a href =#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>第1< h2>p orem ipsum dolor sit amet，b consectetur adipisicing elit，b和sius do eiusmod tempor incididunt ut Labore et dolore magna aliqua.尽量不要使用静脉注射，而是要进行无刺激性锻炼.劳工问题导致的经济后果.Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur.
p
p p p p p 和pp，pf，fp，fp，fp，fp，pb，pb，pb，p3，p3，p3，p3，p3，p3，p3，p3，p3，p3和p3的数量均不相同.</section>< section id ="two" class ="s s2">< h2>第二部分< h2>p orem ipsum dolor sit amet，b consectetur adipisicing elit，b和sius do eiusmod tempor incididunt ut Labore et dolore magna aliqua.尽量不要使用静脉注射，而是要进行无刺激性锻炼.劳工问题导致的经济后果.Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur.
p
p p p p p 和pp，pf，fp，fp，fp，fp，pb，pb，pb，p3，p3，p3，p3，p3，p3，p3，p3，p3，p3和p3的数量均不相同.</section>< section id ="three" class ="s s3">< h2>第3</h2>< p> Lorem ipsum dolor sit amet，< b>连续性平淡，“ sius do eiusmod tempor incididunt ut labour et et dolore magna aliqua.尽量不要使用静脉注射，而是要进行无刺激性锻炼.劳工问题导致的经济后果.Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur.
p
p p p p p 和pp，pf，fp，fp，fp，fp，pb，pb，pb，p3，p3，p3，p3，p3，p3，p3，p3，p3，p3和p3的数量均不相同.</section></div></div>< script>//任务二代码</script></body></html> 解决方案
这实际上非常简单，因为您正在使用jQuery，如下面的代码片段所示.HTML/CSS中的任何内容均未更改.代码中说明了如何完成此操作.
尝试编码是一件很了不起的事情，但是在stackoverflow上，您不执行任务1，任务2等，而是复制整个项目代码.相反，您只需要提供所需的代码段，并说明您遇到的问题是我们可以了解当前情况.是的，您可以解释一个问题，而不仅仅是说做到这一点".分享您对特定问题的想法和尝试.
无论如何，我希望我能为您提供帮助.祝你有美好的一天:)
//任务一$(.color-list li").click(function(){//单击li时var el = $(this);//获取点击的元素var color = el.text();//获取li元素的文本//现在设置所有元素的背景$(.color-list li").css("background-color"，color);//并重置字体粗细和大写$(.color-list li").css("font-weight"，"normal");$(.color-list li").css("text-transform"，"none");//将被点击的元素设为粗体&大写el.css("font-weight"，"bold");el.css("text-transform"，大写");});//任务二$(.tabs nav a").click(function(){//单击导航项时var el = $(this);//获取点击的元素var tab = el.attr("href");//从href获取ID//重置所有标签页链接$(.tabs nav li").removeClass("active");//并将新的设置为活动el.parent().addClass("active");//隐藏所有标签$(.tabs-sections section").hide();//显示当前标签$(tab).show();}); html {margin:2em;字体家族:Helvetica，Arial，无衬线；}h1 {margin:0;}h2 {color:#369;}hr {margin:2em 0;}.color-list {margin:0;填充:0;list-style:无；}.color-list li {margin:0.5em 0;填充:0.5em;颜色:#fff;边框:1px实线#000；背景颜色:#000;}.color-list li:hover {cursor:pointer;}nav ul {margin:0;填充:0;list-style:无；}nav li {display:inline-block;}nav li a {display:block;padding:1em;颜色:#ccc;文字修饰:无；背景色:灰色；}.tabs-sections {padding:0 1em;边框:1px纯灰色；}.active a {color:#000;背景色:浅灰色；}.s2，.s3 {display:none;} < script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>< header< h1>项目18</h1>/header>< p> b>提醒:</b>只写JavaScript.</p>请勿修改HTML或CSS.< h2>任务一:为兄弟姐妹着色</h2>< p>当单击& li"之一时:</p>< ol>< li>将所有li的背景颜色更新为所单击的" li&"/li>的颜色值.< li>仅使所点击的项目为粗体和大写</li></ol>< ul id ="colors" class ="color-list">< li> red</li>< li>橙色</li>< li>黄色</li>< li>绿色</li>< li>蓝色</li>< li&indigo</li>< li"紫罗兰色//li></ul>< script>//任务一代码</script>< hr>< h2>任务二:标签切换</h2>< p>添加jQuery，以便在单击导航项时:</p>< ol>< li>变成活动的导航项目(浅灰色).< li>下面的内容切换为显示正确的部分</li>.</ol>< p< b>注:</b>该页面不应尝试将链接锚定到目标部分.< div class ="tabs">< nav>< ul>< li class ="active">< a href =#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>第1< h2>p orem ipsum dolor sit amet，b consectetur adipisicing elit，b和sius do eiusmod tempor incididunt ut Labore et dolore magna aliqua.尽量不要使用静脉注射，而是要进行无刺激性锻炼.劳工问题导致的经济后果.Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur.
p
p p p p p 和pp，pf，fp，fp，fp，fp，pb，pb，pb，p3，p3，p3，p3，p3，p3，p3，p3，p3，p3和p3的数量均不相同.</section>< section id ="two" class ="s s2">< h2>第二部分< h2>p orem ipsum dolor sit amet，b consectetur adipisicing elit，b和sius do eiusmod tempor incididunt ut Labore et dolore magna aliqua.尽量不要使用静脉注射，而是要进行无刺激性锻炼.劳工问题导致的经济后果.Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur.
p
p p p p p 和pp，pf，fp，fp，fp，fp，pb，pb，pb，p3，p3，p3，p3，p3，p3，p3，p3，p3，p3和p3的数量均不相同.</section>< section id ="three" class ="s s3">< h2>第3</h2>p orem ipsum dolor sit amet，b consectetur adipisicing elit，b和sius do eiusmod tempor incididunt ut Labore et dolore magna aliqua.尽量不要使用静脉注射，而是要进行无刺激性锻炼.劳工问题导致的经济后果.Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur.
p
p p p p p 和pp，pf，fp，fp，fp，fp，pb，pb，pb，p3，p3，p3，p3，p3，p3，p3，p3，p3，p3和p3的数量均不相同.</section></div></div> 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:
Update the background color of all li's to the color value of the clicked "li" Make only the clicked item bold and uppercase
Task two: Add the jQuery so that when a nav item is clicked:
It becomes the active nav item (the light gray color) The content below switches to show the correct section NOTE: the page should not try and anchor link down to the target section.
<!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>
解决方案
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 "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>
这篇关于jQuery样式(为同级兄弟着色)和jQuery活动项(制表符切换)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
