在javascript onclick中添加樣式以標記

Question

我有這個工作的JavaScript，我想要另一個功能。 我想，如果我單擊“公平交易”，則文字顏色應更改，如果現在按“ Toxicfree”，則應淡出該樣式並以新樣式淡出。

這是為了確保用戶知道他們選擇並正在閱讀的標題。

感謝所有幫助！

 var $imgs = $(".section-link"); var data = [{ title: "Fair Trade", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }, { title: "Toxicfree", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }, { title: "Quality", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }, { title: "Organic", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }, { title: "Vegan", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }, ]; // Get reference to the output area var $outputDiv = $(".section-display"); var defaulttext = $outputDiv.find(".text1").html() var defaultTitle = $outputDiv.find(".title1").html(); $imgs.on("click", function() { $This = $(this) $(".title1", $outputDiv).animate({ opacity: 0 }, function() { $(".title1", $outputDiv).html(data[$This.index() - 1].title) .animate({ opacity: 1 }); }); $(".text1", $outputDiv).animate({ opacity: 0 }, function() { $(".text1", $outputDiv).html(data[$This.index() - 1].text) .animate({ opacity: 1 }); }) }); $(document).on("click", function(e) { if ($(e.target).closest('.section-display').length != 1 && $(e.target).closest(".section-link").length != 1) { $(".title1", $outputDiv).animate({ opacity: 0 }, function() { $(".title1", $outputDiv).html(defaultTitle) .animate({ opacity: 1 }); }); $(".text1", $outputDiv).animate({ opacity: 0 }, function() { $(".text1", $outputDiv).html(defaulttext) .animate({ opacity: 1 }); }) } }) 

 .section-link { width: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="section-link small-solid-circle-p4 fair-d"> <h2> <nobr>FAIR-TRADE</nobr> </h2> </div> <div class="section-link small-solid-circle-p4 toxic-d"> <h2>TOXICFREE</h2> </div> <div class="section-link small-solid-circle-p4 quality-d"> <h2>QUALITY</h2> </div> <div class="section-link small-solid-circle-p4 organic-d"> <h2>ORGANIC</h2> </div> <div class="section-link small-solid-circle-p4 vegan-d"> <h2>VEGAN</h2> </div> <div class="section-display active info-p4"> <h2 class="title1">Lorem ipsum</h2> <h2 class="text1">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br> <br> Tap on the symbols if you want to know more.</h2> </div> 

JSFIDDLE

Answer 1

將一個類添加到所選的div，然后為該類賦予特殊的顏色。

使用CSS中的transition為淡入淡出樣式設置動畫：

-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;

.5s表示半秒。 您可以根據需要增加或減少數量

 var $imgs = $(".section-link"); var data = [{ title: "Fair Trade", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }, { title: "Toxicfree", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }, { title: "Quality", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }, { title: "Organic", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }, { title: "Vegan", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }, ]; // Get reference to the output area var $outputDiv = $(".section-display"); var defaulttext = $outputDiv.find(".text1").html() var defaultTitle = $outputDiv.find(".title1").html(); $imgs.on("click", function() { $This = $(this) ; $imgs.removeClass("clicked") ; $This.addClass("clicked"); $(".title1", $outputDiv).animate({ opacity: 0 }, function() { $(".title1", $outputDiv).html(data[$This.index() - 1].title) .animate({ opacity: 1 }); }); $(".text1", $outputDiv).animate({ opacity: 0 }, function() { $(".text1", $outputDiv).html(data[$This.index() - 1].text) .animate({ opacity: 1 }); }) }); $(document).on("click", function(e) { if ($(e.target).closest('.section-display').length != 1 && $(e.target).closest(".section-link").length != 1) { $(".title1", $outputDiv).animate({ opacity: 0 }, function() { $(".title1", $outputDiv).html(defaultTitle) .animate({ opacity: 1 }); }); $(".text1", $outputDiv).animate({ opacity: 0 }, function() { $(".text1", $outputDiv).html(defaulttext) .animate({ opacity: 1 }); }) } }) 

 .section-link { width: 100px; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .section-link.clicked{ color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="section-link small-solid-circle-p4 fair-d"> <h2> <nobr>FAIR-TRADE</nobr> </h2> </div> <div class="section-link small-solid-circle-p4 toxic-d"> <h2>TOXICFREE</h2> </div> <div class="section-link small-solid-circle-p4 quality-d"> <h2>QUALITY</h2> </div> <div class="section-link small-solid-circle-p4 organic-d"> <h2>ORGANIC</h2> </div> <div class="section-link small-solid-circle-p4 vegan-d"> <h2>VEGAN</h2> </div> <div class="section-display active info-p4"> <h2 class="title1">Lorem ipsum</h2> <h2 class="text1">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br> <br> Tap on the symbols if you want to know more.</h2> </div>