首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >纯CSS/ YUI水平菜单,target = _blank不打开新窗口或标签

纯CSS/ YUI水平菜单,target = _blank不打开新窗口或标签
EN

Stack Overflow用户
提问于 2014-06-04 00:24:21
回答 2查看 766关注 0票数 0

使用YUI和Pure-CSS,我创建了一个水平导航菜单。一个链接(“信使”)必须打开一个新的窗口或选项卡(target = "_blank"),但是Javascript忽略了这一点,并在当前窗口中打开该链接。

HTML/CSS是:

代码语言:javascript
复制
<div id="demo-horizontal-menu">
<ul id="std-menu-items">
    <li class="pure-menu-selected"><a href="#">Flickr</a></li>
    <li><a href="http://cnn.com" target="_blank">Messenger</a></li>
    <li><a href="#">Sports</a></li>
    <li><a href="#">Finance</a></li>
    <li>
        <a href="#">Other</a>
        <ul>
            <li class="pure-menu-heading">More from Yahoo!</li>
            <li class="pure-menu-separator"></li>
            <li><a href="#">Autos</a></li>
            <li><a href="#">Flickr</a></li>
            <li><a href="#">Answers</a></li>
            <li>
                <a href="#">Even More</a>
                <ul>
                    <li><a href="#">Horoscopes</a></li>
                    <li><a href="#">Games</a></li>
                    <li><a href="#">Jobs</a></li>
                    <li><a href="#">OMG</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

Javascript是:

代码语言:javascript
复制
YUI({
classNamePrefix: 'pure'
}).use('gallery-sm-menu', function (Y) {

var horizontalMenu = new Y.Menu({
    container         : '#demo-horizontal-menu',
    sourceNode        : '#std-menu-items',
    orientation       : 'horizontal',
    hideOnOutsideClick: false,
    hideOnClick       : false
});

horizontalMenu.render();
horizontalMenu.show();

});

这里是小提琴:

http://jsfiddle.net/k8qMY/607/

这些库似乎有几个类似的问题,但大多数都是使用onClick来跟踪新窗口,或者强制使用新窗口而不是新选项卡。

EN

回答 2

Stack Overflow用户

发布于 2014-06-04 00:35:44

您的提琴(http://jsfiddle.net/p3A9P/)正在为我打开一个新选项卡中的messenger链接。

代码语言:javascript
复制
target="_blank" //Appears to be working properly for me.

可能是环境问题,而不是你的代码?您使用的是哪种浏览器?它是最新的吗?

我使用的是Google Chrome版本29.0.1547.66 m

票数 1
EN

Stack Overflow用户

发布于 2014-06-06 08:36:05

如果您看到正在使用的href,您会注意到在第196行,他们重构了<a>元素,只接受href属性,而忽略了您的目标。这就是为什么"Messenger“菜单选项无法在新的浏览器窗口/选项卡中打开的原因。

也许您可以选择菜单项,并在呈现后手动添加目标属性。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24020216

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档