在javascript onclick中添加样式以标记

Question

I have this working javascript that i would like to one more feature to. I would like so that if i click for example " Fair Trade " the text color should change, and if i now press for example " Toxicfree " it should fade away that style and fade in the new style.

This is to make sure the user knows what Title they have selected and are reading about.

All help is appreciated!

 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

Add a class to the selected div, and then give a special color to this class.

Use transition in css to animate the fade-in fade-out styling:

-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 means half a second. You can increase or decrease the number depending on your requirements

 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>