Question

在我的网站上，我必须构建多个剧透。我打算使用此代码创建剧透：How to create multiple spoiler buttons。

我正在寻找一种在页面'A.html'上创建链接'x'的简单方法，该页面'B .html'并在'B.html'页面上打开扰流'x'。因此扰流器 name =“x”，网址应与 B.html＃x 类似。

换句话说，我需要页面 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每个部分都会添加一个以链接结尾的唯一网址。

Answer 1

如果您不想通过查询网址进行操作，则需要在新的JavaScript B.html中打开window。

你可以做点什么，e。 G：

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

然后你可以像在myVariable

那样阅读网站B.html上的变量

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

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

Answer 2

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

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

在单独的页面上打开扰流板

2 个答案: