单击箭头转到下一张幻灯片时使用 javascript 为 svg 着色
Coloring svg using javascript when clicking an arrow to go to the next slide
当我按红色方块更改幻灯片时，我必须为 SVG 着色，有人可以帮助我吗？
我可以在点击时为 SVG 着色，但是当我单击红色方块转到下一张幻灯片时，我不知道如何更改 SVG 的颜色以使其与白色匹配。
所以最后的结果应该是当我点击红色方块时幻灯片发生变化，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>
您不需要专门将圆圈设置为白色 (class .colorebianco)。相反，只需添加一个 CSS 规则，如果它在 .active 范围内，则使圆圈变白。
.tab-buttons>span.active path {
fill: #ffffff!important;
}
然后一切都会自动为您工作。
当我按红色方块更改幻灯片时，我必须为 SVG 着色，有人可以帮助我吗？
我可以在点击时为 SVG 着色，但是当我单击红色方块转到下一张幻灯片时，我不知道如何更改 SVG 的颜色以使其与白色匹配。
所以最后的结果应该是当我点击红色方块时幻灯片发生变化，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>
您不需要专门将圆圈设置为白色 (class .colorebianco)。相反，只需添加一个 CSS 规则，如果它在 .active 范围内，则使圆圈变白。
.tab-buttons>span.active path {
fill: #ffffff!important;
}
然后一切都会自动为您工作。