单击后隐藏超链接（javascript）

【问题标题】：Hide hyperlink once it's been clicked (javascript)单击后隐藏超链接（javascript）
【发布时间】：2014-03-05 14:14:51
【问题描述】：

我目前正在使用此代码：

:javascript
  function showstuff(content#{g.id}){
   document.getElementById(content#{g.id}).style.display="block";
  }
  function hidestuff(content#{g.id}){
   document.getElementById(content#{g.id}).style.display="none";
  }

%div{ :id => "#{g.id}"}

  %h3 #{g.title}

  %p 
    #{g.excerpt}

  %a{:id => "more#{g.id}",:onclick => "showstuff('content#{g.id}')"} Read More

  %div{ :id => "content#{g.id}", :style => "display:none;"}

    %p #{g.content}


    %a{ :onclick => "hidestuff('content#{g.id}')"} Show Less

一旦点击第一个链接（阅读更多），它会显示底部 div，然后在点击第二个链接（显示更少）时再次隐藏它。我希望第一个链接在被点击后消失。所以当底部 div 可见时，阅读更多链接不可见。

【问题讨论】：

你不能用css吗？比如：a:visited{ display:none; }
否，因为如果单击“显示更少”，我希望它再次显示

标签： javascript css function haml

【解决方案1】：

也许这会对你有所帮助。

HTML

<div id="main" class="hide">
    <a id="more" onclick="showhide();">Read More</a>

    <div id="content">
        <p>div content</p>
        <a id="less" onclick="showhide();">Show Less</a>
    </div>
</div>

CSS

#main a { cursor: pointer; } /* without href attribute there's no pointer */
#content { background: lightgray; } /* just for display purposes */
#main.hide #more { display: inline; }
#main.hide #content { display: none; }
#main.show #more { display: none; }
#main.show #content { display: block; }

JAVASCRIPT

function showhide() {
    main_div = document.getElementById('main');
    if (main_div.className == 'hide')
        main_div.className = 'show';
    else
        main_div.className = 'hide';
}

【讨论】：