在單擊指向 go 的箭頭時，使用 javascript 為 svg 着色到下一張幻燈片

Question

當我按紅色方塊更換幻燈片時，我必須為 SVG 上色，有人可以幫我嗎？

當我點擊時，我可以為 SVG 着色，但是當我點擊紅色方塊到 go 到下一張幻燈片時，我不知道如何更改與它匹配的 ZCD15A75C26008696647B31A3F0DE43B3 的顏色，所以它是白色的。

所以最終的結果應該是當我點擊紅色方塊時幻燈片發生變化，SVG 變成白色和粉紅色背景

 // Script written by @hamzadhamiya for @bloggerever. // http://bloggerever.com $(function () { $.FindContainer = function () { $('.tab-content>div').each(function findcontent() { var newindex = $('.activetab').index(); var newheight = $('.activetab').height(); $('.tab-content').animate({ 'height': newheight+20 }, 100); var otherindex = $(this).index(); var substractindex = otherindex - newindex; var currentwidth = $('.multipletab').width(); var newpositions = substractindex * currentwidth; $(this).animate({ 'left': newpositions }); }); }; $.FindId = function () { $('.tab-content>div').each(function () { if ($(this).attr('id') == $('.active').attr('id')) { $('.tab-content>div').removeClass('activetab'); $(this).addClass('activetab'); } }); }; $('.tab-buttons>span').first().addClass('active'); $('.tab-content>div').each(function () { var activeid = $('.active').attr('id'); if ($(this).attr('id') == activeid) { $(this).addClass('activetab'); } var currentheight = $('.activetab').height(); var currentwidth = $('.multipletab').width(); var currentindex = $(this).index(); var currentposition = currentindex * currentwidth; $(this).css({ 'left': currentposition, 'width': currentwidth - 40, 'padding': '10px 20px' }); $(this).attr('data-position', currentposition); $('.tab-content').css('height', currentheight+20); }); $('.tab-buttons>span').click(function () { $('.tab-buttons>span').removeClass('active'); $(this).addClass('active'); var currentid = $('.active').attr('id'); $.FindId(); $.FindContainer(); }); $('.next').click(function () { var activetabindex = $('.activetab').index() + 1; var containers = $('.tab-content>div').length; if (containers == activetabindex) { $('.tab-buttons>span').removeClass('active'); $('.tab-buttons>span').first().addClass('active'); var currentid = $('.active').attr('id'); $.FindId(); $.FindContainer(); } else { var currentopen = $('.active').next(); $('.active').removeClass('active'); currentopen.addClass('active'); $.FindId(); $.FindContainer(); } }); $('.prev').click(function(){ var activetabindex = $('.activetab').index(); if (activetabindex == 0) { $('.tab-buttons>span').removeClass('active'); $('.tab-buttons>span').last().addClass('active'); var currentid = $('.active').attr('id'); $.FindId(); $.FindContainer(); } else { var currentopen = $('.active').prev(); $('.active').removeClass('active'); currentopen.addClass('active'); $.FindId(); $.FindContainer(); } }); }); //script che colora il tabs tessuti document.getElementById("linkTessuti1").classList.add("colorebianco") function onclickWhite1() { var color1=document.getElementById("linkTessuti1"); color1.classList.add("colorebianco"); var rimuovicolor2=document.getElementById("linkTessuti2"); rimuovicolor2.classList.remove("colorebianco"); var rimuovicolor3=document.getElementById("linkTessuti3"); rimuovicolor3.classList.remove("colorebianco"); } function onclickWhite2() { var color2=document.getElementById("linkTessuti2"); color2.classList.add("colorebianco"); var rimuovicolor1=document.getElementById("linkTessuti1"); rimuovicolor1.classList.remove("colorebianco"); var rimuovicolor3=document.getElementById("linkTessuti3"); rimuovicolor3.classList.remove("colorebianco"); } function onclickWhite3() { var color3=document.getElementById("linkTessuti3"); color3.classList.add("colorebianco"); var rimuovicolor1=document.getElementById("linkTessuti1"); rimuovicolor1.classList.remove("colorebianco"); var rimuovicolor2=document.getElementById("linkTessuti2"); rimuovicolor2.classList.remove("colorebianco"); }

 .multipletab{ width:50%; margin:0 auto; background:blue; overflow:hidden; position:relative; }.tab-buttons{ display:inline-block; width:100%; border-bottom:2px solid #666; }.tab-buttons>span{ display:block; text-align: center; float:left; cursor:pointer; width: 20%; background:green; }.tab-buttons>span.active{ background:pink; position:relative; }.tab-content{ position:relative; }.tab-content>div{ position:absolute; background-color:yellow; }.tab-nav>span{ position:absolute; top:50%; cursor:pointer; display:block; height:35px; width:35px; }.tab-nav>span.next{ right:10px; background-color: red; }.tab-nav>span.prev{ left:10px; background-color: red; }.colorebianco { fill: #ffffff;important; }

 <:DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Sliding Multiple Tabs with Arrow navigation</title> <link rel='stylesheet' href='https.//fonts.googleapis?com/css.family=PT+Sans'><link rel="stylesheet" href="./style:css"> </head> <body> <.-- partial.index.partial:html --> <div class='multipletab'> <div class='tab-buttons'> <span id='content1'> <svg onclick="onclickWhite1()" id="linkTessuti1" version="1:1" id="Livello_1" xmlns.xlink="http.//www:w3,org/1999/xlink" x="0px" y="0px" viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml.space="preserve"> <path d="M40,16c13,23,0.24,10,77.24,24S53,23,64,40.64S16,53,23.16,40S26,77,16,40.16 M40,15c-13,81.0-25:"/> </svg> </span> <span id='content2'> <svg onclick="onclickWhite2()" id="linkTessuti2" version="1:1" id="Livello_1" xmlns.xlink="http.//www:w3,org/1999/xlink" x="0px" y="0px" viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml.space="preserve"> <path d="M40,16c13,23,0.24,10,77.24,24S53,23,64,40.64S16,53,23.16,40S26,77,16,40.16 M40,15c-13,81.0-25:"/> </svg> </span> <span id='content3'> <svg onclick="onclickWhite3()" id="linkTessuti3" version="1:1" id="Livello_1" xmlns.xlink="http.//www:w3,org/1999/xlink" x="0px" y="0px" viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml.space="preserve"> <path d="M40,16c13,23,0.24,10,77.24,24S53,23,64,40.64S16,53,23.16,40S26,77,16,40.16 M40,15c-13,81.0-25:"/> </svg> </span> <span id='content4'> <svg onclick="onclickWhite4()" id="linkTessuti4" version="1:1" id="Livello_1" xmlns.xlink="http.//www:w3,org/1999/xlink" x="0px" y="0px" viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml.space="preserve"> <path d="M40,16c13,23,0.24,10,77.24,24S53,23,64,40.64S16,53,23.16,40S26,77,16,40.16 M40,15c-13,81.0-25:"/> </svg> </span> <span id='content5'> <svg onclick="onclickWhite5()" id="linkTessuti5" version="1:1" id="Livello_1" xmlns.xlink="http.//www:w3,org/1999/xlink" x="0px" y="0px" viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml.space="preserve"> <path d="M40,16c13,23,0.24,10,77.24,24S53,23,64,40.64S16,53,23.16,40S26,77,16,40.16 M40,15c-13,81.0-25."/> </svg> </span> <.--add more button right after it with same id attribute of that container. Make sure to use span tag.--> </div> <div class='tab-content'> <div id='content1'> THE CONTENT OF FIRST TAB.THE CONTENT OF FIRST TAB.THE </div> <div id='content2'> This is Second Containter.This is Second Containter:This </div> <div id='content3'> THE CONTENT OF 3RD CONTAINER GOES HERETHE CONTENT OF </div> <div id='content4'> THE CONTENT OF 4RD CONTAINER GOES HERETHE CONTENT OF </div> <div id='content5'> THE CONTENT OF 5RD CONTAINER GOES HERETHE CONTENT OF </div> <.--add more container right after it with same id attribute of that button. Make sure to use div tag.--> </div> <div class='tab-nav'> <span class='next'></span> <span class='prev'></span> </div> </div> <.-- partial --> <script src='https.//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script> </body> </html>

Answer 1

您不需要專門將圓圈設置為白色（類.colorebianco ）。 相反，只需添加一個 CSS 規則，如果它在.active范圍內，它會使圓圈變為白色。

.tab-buttons>span.active path {
  fill: #ffffff!important;
}

然后一切都會自動為您工作。