javascript 禁用自动创建的下拉菜单js中的链接

mccptt67  于 2023-03-21  发布在  Java
关注(0)|答案(1)|浏览(88)

固定:
所以我得到了这段javascript,当浏览器足够小的时候,它会显示一个下拉菜单(用一些@media完成)。菜单是根据更大屏幕尺寸的菜单自动创建的。现在我的问题是,它还创建了来自“Something 1”和“Something 2”的链接。
我想这些被显示,但禁用,所以不能点击。
FIX:必须添加的唯一一件事,以便它不会将“Something 1/2”链接到不存在的页面:

<a href="javascript:void(0)"></a>

超文本标记语言

<div class="nav">
    <nav>
        <ul>
            <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

            </li>
            <li> <a href="javascript:void(0)">Something1</a>

                <ul>
                    <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

                    </li>
                    <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

                    </li>
                </ul>
                <li><a href="javascript:void(0)">Something2</a>

                    <ul>
                        <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

                        </li>
                        <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

                        </li>
                        <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

                        </li>
                        <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

                        </li>
                    </ul>
                </li>
                <li><a href="#contact" data-liquidslider-ref="main-slider">Actual Link</a>

                </li>
        </ul>
    </nav>
</div>

JS系统

// Create the dropdown base
$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
    "selected": "selected",
        "value": "",
        "text": "Go to..."
}).appendTo("nav select");

// Populate dropdown with menu items
$("nav a").each(function () {
    var el = $(this);
    $("<option />", {
        "value": el.attr("href"),
            "text": el.text()
    }).appendTo("nav select");
});

$("nav select").change(function () {
    window.location = $(this).find("option:selected").val();
});

有什么办法可以做到这一点吗?

y1aodyip

y1aodyip1#

创建空白链接的最简单方法如下:

<a href="#"></a>

<a href="javascript:void(0)"></a>

我不确定哪一个是最好的选择,但是我最近开始使用第二个选项。当你使用第一个选项时,它会在你的url末尾添加#符号,这会搞乱活动的导航链接。

相关问题