javascript - 单击元素并移动到另一个页面,下拉菜单基于在第一页中单击的元素

标签 javascript html css

我想制作简单的效果,但我不知道什么是完美的方法。在第一页中,我有六个可点击的 div。例如,当我单击第三个 div 时,当下拉菜单根据第一页中选择的 div 更改并显示下拉菜单中的第三个元素时,我想移动到第二页。例如,当单击第二个 div 而不是移动到第二页时,下拉菜单会显示他的第二个元素等。有人可以告诉我执行此操作的完美方法吗?提前致谢

最佳答案

您可以为此使用位置哈希

这里假设这是你的第一页:(我使用 <a> 标签而不是 div 来简单地解释)

First.html

<body>
    <a href="second.html#div1">Div1</a>
    <a href="second.html#div2">Div2</a>
    <a href="second.html#div3">Div3</a>
    <a href="second.html#div4">Div4</a>
    <a href="second.html#div5">Div5</a>
    <a href="second.html#div6">Div6</a>
</body>

注意上面代码中的 href 属性。

Second.html

<select id="mySelect">
    <option value="div1">Div 1</option>
    <option value="div2">Div 2</option>
    <option value="div3">Div 3</option>
    <option value="div4">Div 4</option>
    <option value="div5">Div 5</option>
    <option value="div6">Div 6</option>
</select>
<script type="text/javascript">
    (function(){
        var hash = window.location.hash;
        if(hash!=""){
            document.getElementById("mySelect").value = hash.replace("#","");
        }
    })();
</script>

您在这里阅读 window.location.hash并在 select 中设置相同.

关于javascript - 单击元素并移动到另一个页面,下拉菜单基于在第一页中单击的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38008703/

相关文章:

javascript - aureliajs 如何绑定(bind)类属性

asp.net - 如何在鼠标悬停期间观察元素的样式?

javascript - 我有一个带有 JQuery 的简单图像图片 slider ,但我不知道如何向上或向下设置动画

javascript - 点击队列功能

javascript - 在文件上传时隐藏 span 元素

html - 带有图像图案的 SVG 仅适用于 Chrome

javascript - jQuery UI Dialog、Checkboxes和IE6的神秘案例

javascript - Mini-css-extract-plugin 没有使用 sass 将我的 css 捆绑到一个文件中

javascript - 在滚动条上缩放 div 内容

javascript - 如何防止此广告网络 http 请求?以及如何插入请求?