用JavaScript打開多個div
[英]opening multiple divs with javascript
問題描述
我正在嘗試在右側打開一個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>
希望有人能幫忙！
2 個解決方案
解決方案1
0 2017-09-11 19:55:55
您不能多次使用ID！ 這就是為什么它被稱為ID。
這也會使HTML無效： https : //validator.w3.org/nu/?doc=http% 3A%2F%2Fbolink.eu%2Fdemo% 2F
使用類選擇器。 它們也可以在jQuery中使用：
$("."+divtitle)
解決方案2
0 2017-09-11 20:18:18
我將動畫放入右側divs（右側）的另一個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>
希望它能對某人有所幫助！
使用javascript拖動多個div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.