Как стиль li использует значение щелчка li?

Я немного застрял здесь и был бы рад, что вас поместили на правильный путь. В принципе, у меня есть список ликов с именами цветов, и как только один из ящиков нажат, мне нужно, чтобы все ли изменяли цвета фона на цвет щелчка, а также щелкнули 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>

источник

2015-04-06 Syd

Пожалуйста, покажите, что вы уже пробовали. Подсказка: '$ (this) .text()' будет содержимым щелкнутого элемента. – Barmar

Это выглядит как домашнее задание. Я предлагаю вам провести некоторое исследование и сделать попытку. Если вы застряли, сообщите нам, что вы пробовали, и что конкретно идет не так. – showdev

@ Бармар, я дам ему поход и покажу тебе, что у меня есть. В начинающем веб-классе без предшествующего опыта, так почти не имеют понятия, как начать. Благодаря! – Syd

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

Надеется, что это помогает :)

источник

2015-04-06 20:14:08 TonalLynx

спасибо, что это работает очень хорошо, оцените! – Syd

Добро пожаловать. Если можете, отметьте ответ как принято :) – TonalLynx

Как стиль li использует значение щелчка li?

ответ

Смежные вопросы