纯 CSS / YUI - 水平菜单，目标 = _blank 不会打开新窗口或标签答案

【问题标题】：Pure-CSS / YUI - horizontal menu, target = _blank doesn't open new window or tab纯 CSS / YUI - 水平菜单，目标 = _blank 不会打开新窗口或标签
【发布时间】：2014-07-24 02:05:09
【问题描述】：

使用 YUI 和 Pure-CSS，我创建了一个水平导航菜单。一个链接（“Messenger”）必须打开一个新窗口或标签（target =“_blank”），但 Javascript 会忽略它并在当前窗口中打开链接。

HTML/CSS 是：

<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 是：

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 跟踪新窗口或强制新窗口而不是新选项卡。

【问题讨论】：

标签： javascript css target yui-pure-css

【解决方案1】：

您的小提琴 (http://jsfiddle.net/p3A9P/) 正在为我打开新标签页中的信使链接。

target="_blank" //Appears to be working properly for me.

可能是环境问题而不是您的代码？你使用的是什么浏览器？是最新的吗？

我使用的是 Google Chrome 版本 29.0.1547.66 m

【讨论】：

我在那里有一个测试链接，它具有适当的行为。我不知道您是否正在使用它，但我现在已将其删除。在我的所有浏览器中，“Messenger”菜单项仍会在小提琴的当前选项卡/窗口中打开。

【解决方案2】：

如果您看到正在使用的the source code of the sm-menu YUI plugin，您会注意到在第196 行，他们重构了仅采用href 属性的<a> 元素，而忽略了您的目标。这就是为什么“Messenger”菜单选项无法在新的浏览器窗口/选项卡上打开的原因。

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

【讨论】：