Sur mon site Web, je dois construire plusieurs spoilers. Je prévois d'utiliser ce code pour créer des spoilers: How to create multiple spoiler buttons.Ouvrir spoiler sur une page séparée
Je cherche un moyen facile de créer un lien « x » sur une page « a.html » qui mène à la page « B.html » et ouvre le spoiler « x ' sur la page ' B.html '. Donc, le spoiler nom = "x" et l'URL devrait ressembler à B.html # x.
En d'autres termes, je besoin d'une table des matières sur la page a.html pour spoilers sur la page B.html.
Mais si vous allez directement à la page B.html, tous les spoilers devraient être fermés par défaut avec une option pour les ouvrir et les fermer en cliquant sur le titre du spoiler.
Toutes les solutions prêtes à l'emploi seraient appréciées. La solution ne doit pas nécessairement être basée sur le code fourni ci-dessus. Ok, je sais que c'est totalement faux, mais c'est ce que j'ai essayé.
a.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.spoiler {
display:none;
width:100%;
height:50px;
background-color:red;
margin-bottom:10px;
}
.contentBoxFooter{position:absolute;bottom:10px;}
</style>
</head>
<body>
<div id="x" class="spoiler">Content1</div>
<div id="y" class="spoiler">Content2</div>
<div id="z" class="spoiler">Content3</div>
<div class="contentBoxFooter">
<a href="B.html#x" class = "spoilerButton">Show/Hide</a>
<a href="B.html#y" class = "spoilerButton">Show/Hide</a>
<a href="B.html#z" class = "spoilerButton">Show/Hide</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</body>
</html>
B.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.spoiler {
display:none;
width:100%;
height:50px;
background-color:red;
margin-bottom:10px;
}
.contentBoxFooter{position:absolute;bottom:10px;}
</style>
</head>
<body>
<div id="x" class="spoiler">Content1</div>
<div id="y" class="spoiler">Content2</div>
<div id="z" class="spoiler">Content3</div>
<div class="contentBoxFooter">
<a href="#x" class = "spoilerButton">Show/Hide</a>
<a href="#y" class = "spoilerButton">Show/Hide</a>
<a href="#z" class = "spoilerButton">Show/Hide</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".spoilerButton").click(function (e) {
e.preventDefault()
var foo=$(this).attr('href')
$(''+foo).slideToggle(1000);
});
});
</script>
</body>
Mise à jour: voici l'exemple de ce que je dois: https://support.google.com/plus/#topic=3049663 chaque section ajoute une URL unique de fin au lien.
[Qu'avez-vous essayé?] (Http://mattgemmell.com/what-have-you-tried/) Avez-vous joué avec http://stackoverflow.com/questions/6644654/parse-url-with- jquery-javascript pour obtenir le 'x' de' B.html # x' –
Merci pour votre réponse! J'ai mis à jour ma question ci-dessus pour montrer ce que j'ai essayé.Je suis désolé, je n'ai pas essayé la solution que vous avez fournie, mais il semble que ce n'est pas ce que je cherche. – Anna