单击以显示内容和 target="_blank" 另一个 link

Question

我需要一个按钮 onclick 来显示内容，同时它也会 target="_blank" 一个新的 window ...这可能吗？我已经尝试了一些代码但没有用，任何人都可以帮我解决这个问题吗？谢谢大家！

<style type="text/css">
   /* This CSS is used for the Show/Hide functionality. */
   .more {
      display: none;
      border-top: 1px solid #666;
      border-bottom: 1px solid #666; }
   a.showLink, a.hideLink {
      text-decoration: none;
      color: #36f;
      padding-left: 8px;
      background: transparent url(down.gif) no-repeat left; }
   a.hideLink {
      background: transparent url(up.gif) no-repeat left; }
   a.showLink:hover, a.hideLink:hover {
      border-bottom: 1px dotted #36f; }
</style>

<div id="wrap">
<h1>Show/Hide Content</h1>
<a href="https://www.facebook.com/sharer/sharer.php?app_id=309437425817038&sdk=joey&u=http%3A%2F%2Fcloudsblack.com%2F180115f.html&display=popup&ref=plugin"
id="example-show" class="showLink" onclick="showHide('example');return false;">
<button class="btn-u btn-u-lg btn-block btn-u-dark-blue">
<i class="fa fa-facebook"></i> Facebook
</button>
</a>
<div id="example" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p>
</div>
</div>                  

<!-- Hide Function -->           
<script language="javascript" type="text/javascript">
function showHide(shID) {
   if (document.getElementById(shID)) {
      if (document.getElementById(shID+'-show').style.display != 'none') {
         document.getElementById(shID+'-show').style.display = 'none';
         document.getElementById(shID).style.display = 'block';
      }
      else {
         document.getElementById(shID+'-show').style.display = 'inline';
         document.getElementById(shID).style.display = 'none';
      }
   }
}
</script>

Answer 1

尝试将 target="_blank" 添加到您的 a 标签，如下所示：

<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?app_id=309437425817038&sdk=joey&u=http%3A%2F%2Fcloudsblack.com%2F180115f.html&display=popup&ref=plugin"
    id="example-show" class="showLink" onclick="showHide('example');return false;">

Answer 2

为什么 return false; 后面 showHide` .

执行顺序是：

showHide 将首先被调用，之后，return false； 被调用，它 return false，因此 href 的处理将停止。当 onclick 事件结束且不为 return false 时，此页面将跳转或为目标打开新页面。

Ps：你这里的onclick事件不是showHide('example');是：

 {
    showHide('example');
    return false;
}

单击以显示内容和 target="_blank" 另一个 link

Onclick to show content and target="_blank" another link

javascript

onclick

button

show-hide