Question

我正在使用javascript（和jQuery）在三个框描述之间移动。

的Javascript

<script type="text/javascript">
    $(document).ready(function() {
        $('#foo-box').show();
        $('#bar-box').hide();
        $('#bob-box').hide();

      $('#bar-link').click(function() {
        $('#foo-box').hide();
        $('#bob-box').hide();
        $('#bar-box').show();
         return false;
      });
    });
</script>

HTML

<div id="stuff">
    <a href="" id="foo-link">Foo</a>
    <a href="" id="bar-link">Bar</a>
    <a href="" id="bob-link">Bob</a>
    <div id="foo-box">Hello</div>
    <div id="bar-box">World</div>
    <div id="bob-box">!!!</div>
</div>

但点击链接后我希望它是普通文本。我似乎无法在javascript中找到一个好的，优雅的方式（我发现了一些可行的方法，但基本上都是黑客攻击）。

我只是厚吗？

Answer 1

也许jquery replaceWith()会有帮助吗？

  $('#bar-link').click(function() {
    ...
     $(this).replaceWith($(this).text());
     return false;
  });

Answer 2

$('#bar-link').click(function() {
        $('#foo-box').hide();
        $('#bob-box').hide();
        $('#bar-box').show();
        $(this).css('text-decoration', 'none');
         return false;
      });

Answer 3

$("a").click(function() {
    $(this).addClass("visited");
}

.visited {
    color: black;
    text-decoration: none;
}

使用javascript删除点击链接格式

3 个答案: