固定:
所以我得到了这段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();
});
有什么办法可以做到这一点吗?
1条答案
按热度按时间y1aodyip1#
创建空白链接的最简单方法如下:
或
我不确定哪一个是最好的选择,但是我最近开始使用第二个选项。当你使用第一个选项时,它会在你的url末尾添加
#
符号,这会搞乱活动的导航链接。