Question

我有一个空间区域和两个正文文本。我在这个区域上方有两个“超链接”，并希望使用它们来显示/隐藏下面的文本。首次加载页面时，除两个链接外不会显示任何内容。单击一个链接时，它会显示文本正文。当您单击其他链接时，它将隐藏上一个文本正文并显示新文本。只有两个超链接，但我希望用户能够在方便时来回切换。这可能吗？以前我使用javascript取消隐藏文本，因为它们位于两个不同的区域。我不是太经验丰富的编写代码。我发现这个主题的其他一些答案很有用，但大多数都使用按钮和点击监听器。有没有办法用超链接做到这一点？代码示例非常感谢！

Answer 1

你可以在CSS中定义一个类，“不要在这里显示文本”，然后使用超链接中的JS点击切换元素的类？

所以你的html将包含：

<a onclick="showText('text1','text2')" href="javascript:void(0);">Show Text 1</a>
<div id="text1" class="hide"> text1 </div>
<a onclick="showText('text2','text1')" href="javascript:void(0);">Show Text 2</a>
<div id="text2" class="hide"> text2 </div>

您的CSS将包含：

div.hide { display:none; [your properties]; }
div.show { [your properties]; }

你的JS看起来像这样：

function showText(show,hide)
{
    document.getElementById(show).className = "show";
    document.getElementById(hide).className = "hide";
}

这有帮助吗？

Answer 2

<a id="myLink" href="javascript:void(0)" onclick="javascript:myLinkButtonClick();"> </a>

在javascript中，如果您使用jQuery：

，则可以执行此操作

function myLinkButtonClick()
{
    $("#myDiv").hide();
}

或

function myLinkButtonClick()
{
    $("#myDiv").show();
}

或者你也可以.toggle

function myLinkButtonClick()
{
    $("#myDiv").toggle();
}

Answer 3

许多人会同意使用锚标签来执行Javascript（并且什么都不做）有点混乱，因为除其他外，它会在地址栏中生成一个可能会混淆用户的哈希标记。这并不是说他们在JS执行中没有自己的位置。

然而，很有可能实现这一目标。这是一个可能的解决方案：

<a href="#" onclick="show('div1')">Link1</a>
<a href="#" onclick="show('div2')">Link2</a>

<div id="div1">Text1</div>
<div id="div2" style="display:none;">Text2</div>

<script>

    var currentDiv = document.getElementById("div1");
    function show(divID) {

        var div = document.getElementById(divID);

        currentDiv.style.display = "none";
        div.style.display = "block";

        currentDiv = div;
    }

</script>

script标记定义了一个变量和一个函数：currentDiv，它引用当前显示的div元素和show函数，用于隐藏当前显示的div并显示一个新的。

点击顶部的锚标签，调用show函数，将当前显示的元素替换为锚标记指定的元素。

为了获取要显示/隐藏的元素，代码会更改元素的CSS display属性。值block显示div元素，值none隐藏它。页面加载时，第二个div的display属性设置为none。单击链接时，Javascript将更改此属性。

不，你不需要JQuery来做这件事，但它可以提供帮助。

Answer 4

有一个很好的jQuery脚本可以按照这些方式做一些事情，看看它是否对你有好处：

http://api.jquery.com/slideToggle/

Answer 5

这是可能的，但更友好的方式是使用jquery选项卡。使用jquery UI的选项卡功能很容易做到这一点，它是所有带有脚本的HTML标记，只运行.tabs（）;作为tab元素ID的函数。

这是一个链接：Jquery Tabs

Answer 6

标签是执行此操作的最佳方式。有很多关于jQuery选项卡的教程 - 这里有一个fairly basic one很好地概述了这些概念，而here's a more advanced one（使用CSS在选项卡上生成圆角）。

显示/隐藏单击

6 个答案: