在另一页上打开扰流板

Open spoiler on a separate page

本文关键字：一页      更新时间：2023-09-26

在我的网站上，我必须构建多个剧透。我计划用这个代码来创建扰流板：如何创建多个扰流板按钮。

我正在寻找一种简单的方法来在页面上创建一个链接，该链接指向页面并打开页面上的扰流板

换言之，我需要a.html页面上的目录，以查看B.html页面上的剧透。

但是，如果您直接进入页面B.html，则默认情况下应关闭所有剧透，并可通过单击剧透标题来打开和关闭它们。

任何现成的解决方案都将不胜感激。解决方案不一定要基于我上面提供的代码。

好吧，我知道这是完全错误的，但这就是我所尝试的。

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>

更新：以下是我需要的示例：https://support.google.com/plus/#topic=3049663每个部分都会在链接末尾添加一个唯一的URL。

如果您不想在查询url时执行此操作，则需要在新的javascript window中打开B.html。

在那里你可以做一些事情，例如：

window win = window.open("B.html");
win.document.myVariable = "test";

然后你可以像通常使用myVariable 一样在网站B.html上读取变量

编辑：如果你只想将页面B.html加载到页面A.html中的扰流板中，那么它只是一个jquery命令：

$("#spoiler").load("B.html");

我在这里找到了一个解决方案：https://forum.jquery.com/topic/accordion-open-a-specific-tab-with-link-from-another-page

但我最终选择了手风琴，而不是我最初想要的一套剧透。

相关文章：