Question

我有一个主页，显示一堆平铺的框和一个指向选项页面的链接，允许我的用户隐藏或显示其中任何一个框，然后保存这些设置。

这是我到目前为止所拥有的：选项页面

    <script>
    $(document).ready(function(){
      $("#musicHide").click(function(){
        $("#mymusic").hide();
      });
      $("#musicShow").click(function(){
        $("#mymusic").show();
      });
    });
    </script>
</head>

<body>
<p>My Music</p>
<input type="radio" id="musicHide" value="0"/>Hide
<input type="radio" id="musicShow" value="1" checked="checked"/>Show
</body>

主页：

<div class="items">
<a id="mymusic" class="box" href="#" style="background: #F8591A;">
<span>Music</span>
<img height="150px" width="150px" class="icon" src="images/my-music.png" alt="" />
</a>

这是我目前遇到的一个问题：当我点击隐藏单选按钮时，“显示”单选按钮不会取消选择。

我该怎么做？

当我使用选项页面时，它不会更新主页。

这可能吗？
我是否必须在主页上拥有代码，而不是在不同的页面上（选项页面）
我应该在主页上使用侧边菜单吗？

此外，我希望每个用户按下保存按钮存储这些值，以便下次打开页面时记住他们想要显示和隐藏的内容。

Answer 1

为了按照您想要的方式设置单选按钮，您需要为每个元素添加相同的Name属性。例如：

<input type="radio" id="musicHide" value="0" name="radioMusic"/>Hide
<input type="radio" id="musicShow" value="1" checked="checked" name="radioMusic"/>Show

为了将“选项”保留到主页，您需要以某种方式存储首选项。这很可能是某种类型的数据库，但您也可以使用cookie进行临时存储。

根据保存的值显示/隐藏框

1 个答案: