我试图在右侧打开一个div，并在同一时间更改动画div，当我使用相同的div ID时会起作用，但这会给我带来css位置的问题。因此，当我按1时，介绍动画消失，并且出现加载data_1.json的动画div。
当前的js代码：
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$('a').click(function () {
var divtitle= this.title;
$("#"+divtitle).show("slow").siblings().hide(1000);
});
});
</script>
<script>
$(function() {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
这里是源代码的其余部分：
<!DOCTYPE html>
<html lang="nl">
<head>
<title>KVL</title>
<meta charset="UTF-8">
<meta name="robots" content="index,follow">
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@font-face {
font-family: Bree;
src: url(Bree.otf) format("opentype");
}
body {
margin: 0 0 600px;
font-family: 'Open Sans', sans-serif;
color:black;
}
*{
margin:0;
padding:0;
}
a {
color:#f6f0e3;
text-decoration:none;
}
.rhombus{
width:90px;
height:90px;
background:#d5c2f4;
margin:36px;
transform:rotate(-45deg);
float:left;
font-family: Bree;
}
.rhombus p{
transform:rotate(45deg) translate(10px,5px);
text-align:center;
font-size: 62px;
font-family: Bree;
}
#footer {
position: absolute;
left: 0;
bottom: 0;
height: 400px;
width: 100%;
text-align:center;
}
div.rechts {
color:black;
position: absolute;
right: 200px;
top: 150px;
margin-right: 30px;
width: 500px;
text-align: justify;
font-size: 24px;
}
h1 {
font-family: Bree;
font-size: 64px;
}
.bodymovin {
background-color:white;
width: 800px;
height:500px;
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
margin: 20px;
position: absolute;
top: 10px;
left: 10px;
}
p.titel {
font-style: italic;
margin-bottom: 30px;
margin-top: 30px;
}
a.meer {
font-family: Bree;
font-size: 40px;
}
p.onder {
text-align: center;
margin: 50px;
}
</style>
<script src="bodymovin.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$('a').click(function () {
var divtitle= this.title;
$("#"+divtitle).show("slow").siblings().hide(1000);
});
});
</script>
<script>
$(function() {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
</head><body>
<div id="footer">
<a href="#" title="content1"><div class="rhombus" style="background-color: #DCCD00;"><p>1</p></div></a>
<a href="#" title="content2"><div class="rhombus" style="background-color: #EDA400;"><p>2</p></div></a>
<a href="#" title="content3"><div class="rhombus" style="background-color: #39AA36;"><p>3</p></div></a>
<a href="#" title="content4"><div class="rhombus" style="background-color: #3AA8DD;"><p>4</p></div></a>
<a href="#" title="content5"><div class="rhombus" style="background-color: #00A79F;"><p>5</p></div></a>
<a href="#" title="content6"><div class="rhombus" style="background-color: #808080;"><p>6</p></div></a>
</div>
<div>
<div id="content1" class="rechts" style="display: none">
<h1 style="color: #DCCD00;">Data Strategy</h1>
<p class="titel">Identificeren van kansen door beter datagebruik.</p>
<p class="verhaal">Met een quick scan identificeren we de mogelijkheden om met analytics de omzet en winst te laten groeien en prestaties verder te verbeteren. Vervolgens bepalen we samen met stakeholders een roadmap. Daarin leggen we vast hoe we relevante data in de organisatie optimaal identificeren, verzamelen, opslaan, beheren, delen en gebruiken.</p>
<p class="onder"><a class="meer" style="color: #DCCD00;" href="#">Lees meer</a></p>
</div>
<div id="content2" class="rechts" style="display: none">
<h1 style="color: #EDA400;">Data Economy</h1>
<p class="titel">Versterken van data-ecosystemen</p>
<p class="verhaal">Met pragmatische en schaalbare data-engineering helpen wij om bestaande en nieuwe data slim te structureren en op te slaan. Zodat alle betrokkenen in een organisatie de data eenvoudig kunnen vinden en gebruiken.</p>
<p class="onder"><a class="meer" style="color: #EDA400;" href="#">Lees meer</a></p>
</div>
<div id="content3" class="rechts" style="display: none">
<h1 style="color: #39AA36;">Business Intelligence</h1>
<p class="titel">Ontsluiten van relevante business-informatie</p>
<p class="verhaal">We gaan op zoek naar de toegevoegde waarde van gecombineerde bedrijfsdata. Hierbij gebruiken we geavanceerde data-analytics en data-visualisatie oplossingen, die bruikbaar zijn voor zowel data-experts en gewone gebruikers in uw organisatie.</p>
<p class="onder"><a class="meer" style="color: #39AA36;" href="#">Lees meer</a></p>
</div>
<div id="content4" class="rechts" style="display: none">
<h1 style="color: #3AA8DD;">Business Impact</h1>
<p class="titel">Creëren van nieuwe inzichten</p>
<p class="verhaal">Van data naar inzicht. Met state-of-the-artmodellen en -benaderingen ondersteunen wij gebruikers op alle niveaus in uw organisatie om op een intuïtieve manier nieuwe inzichten voor uw business te genereren. Waar nodig combineren we uw data met de business-kennis binnen uw bedrijf.</p>
<p class="onder"><a class="meer" style="color: #3AA8DD;" href="#">Lees meer</a></p>
</div>
<div id="content5" class="rechts" style="display: none">
<h1 style="color: #00A79F;">Business Analytics</h1>
<p class="titel">Implementeren van slimme actie voor business value</p>
<p class="verhaal">Wij helpen uw medewerkers om nieuwe verkregen inzichten door te vertalen in concrete groei- en verbeteracties. Ook monitoren we de impact hiervan op uw business. Zo laten wij uw medewerkers ervaren hoe een juist gebruik van data een groot verschil kan maken voor uw business.</p>
<p class="onder"><a class="meer" style="color: #00A79F;" href="#">Lees meer</a></p>
</div>
<div id="content6" class="rechts" style="display: none">
<h1 style="color: #808080;">KVL Academy</h1>
<p class="titel">Kennis vergroten is kennis delen.</p>
<p class="verhaal">Daarom investeren we in de ontwikkeling van onze eigen collega's. En trainen we de medewerkers van onze opdrachtgevers. Op alle domeinen binnen ons vakgebied. Ook bouwen we aan een nieuwe generatie data-experts met ons programma Scherp Talent.</p>
<p class="onder"><a class="meer" style="color: #808080;" href="#">Lees meer</a></p>
</div>
<div id="ani0" class="bodymovin"></div>
<script>
var anim;
var elem = document.getElementById('ani0')
var animData = {
container: elem,
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'data_intro.json'
};
anim = bodymovin.loadAnimation(animData);
</script>
<div class="bodymovin" id="content1" style="display:none"></div>
<script>
var anim;
var elem = document.getElementById('content1')
var animData = {
container: elem,
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'data_1.json'
};
anim = bodymovin.loadAnimation(animData);
</script>
<div id="content2" style="display:none" class="bodymovin"></div>
<script>
var anim;
var elem = document.getElementById('content2')
var animData = {
container: elem,
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'data_2.json'
};
anim = bodymovin.loadAnimation(animData);
</script>
<div id="content3" style="display:none" class="bodymovin"></div>
<script>
var anim;
var elem = document.getElementById('content3')
var animData = {
container: elem,
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'data_3.json'
};
anim = bodymovin.loadAnimation(animData);
</script>
<div id="content4" style="display:none" class="bodymovin"></div>
<script>
var anim;
var elem = document.getElementById('content4')
var animData = {
container: elem,
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'data_4.json'
};
anim = bodymovin.loadAnimation(animData);
</script>
<div id="content5" style="display:none" class="bodymovin"></div>
<script>
var anim;
var elem = document.getElementById('content5')
var animData = {
container: elem,
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'data_5.json'
};
anim = bodymovin.loadAnimation(animData);
</script>
<div id="content6" style="display:none" class="bodymovin"></div>
<script>
var anim;
var elem = document.getElementById('content6')
var animData = {
container: elem,
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'data_6.json'
};
anim = bodymovin.loadAnimation(animData);
</script>
</div>
</body>
</html>
希望有人可以帮忙！
答案 0 :(得分：0)
您不能多次使用ID！这就是为什么它被称为ID。
这也使HTML无效： https://validator.w3.org/nu/?doc=http%3A%2F%2Fbolink.eu%2Fdemo%2F
使用类选择器。它们也可以在jQuery中使用：
$("."+divtitle)
答案 1 :(得分：0)
我已将动画放在不同的div容器（动画）中，然后右侧div（右），然后将动画代码重命名为ani1-ani6。
我已经更改了以下js代码：
<script>
$(document).ready(function(){
$('a').click(function () {
var divtitle= "content"+this.title;
var anititle= "ani"+this.title;
$("#"+divtitle).show("slow").siblings().hide(1000);
$("#"+anititle).show("slow").siblings().hide(1000);
});
});
</script>
希望它有所帮助！