1

我已经广泛搜索了切换元素显示的脚本，但找不到适合以下工作的脚本：

例如，在我的网页上，我有几部分内容..

    <div id="section1">
        <div id="section1a" class="section1links"></div>
        <div id="section1b" class="section1links hide"></div>
        <div id="section1c" class="section1links hide"></div>
    </div>

    <div id="section2">
        <div id="section2a" class="section2links"></div>
        <div id="section2b" class="section1links hide"></div>
        <div id="section2c" class="section1links hide"></div>
    </div>

默认情况下，显示部分中的第一个 div，因此类名和我有以下 CSS：

    .hide {
        display: none;
    }

然后我有一个链接，例如，显示“section1b”：

    <a href="#" onclick="show('section1links','section1b')">show section 1b</a>

在这种情况下，我需要一个 javascript 函数，它首先从所有具有“section1links”类的元素中删除“隐藏”类名，然后将其添加到除“section1b”之外的所有元素中。

简单的说：

    function show(group, sectiontoshow)
    {
        get elements with class name 'group'
        remove any instances of class name 'hide' wherever present

        add class name 'hide' to all elements with class name 'group', except the one with id 'sectiontoshow'.
    }

另外，当一个链接被点击时，它不能让网页跳回顶部。我通常会在链接中使用 'javascript:void(0)' 而不是标签，但不知道它是否会导致冲突。

我相信你更合格的 JS 程序员可能有更好的解决方案，并且可能认为这是一个非常冗长的工作，我是更多的设计师，但任何帮助将不胜感激。

4

2 回答 2

2

您是否已经使用 jQuery，如果没有：使用它 - 那么您可以执行以下操作：

$('.group').removeClass('hide').not('#sectiontoshow').addClass('hide');

在您的函数中，代码应该像这样使用：

function show(group, sectiontoshow) {
  $('.' + group).removeClass('hide').not('#' + sectiontoshow).addClass('hide');
}
于 2013-06-05T12:21:46.033 回答
0

传递元素的 id 和您希望它拥有的类，而不是使用 id 将其类更改为您传入参数的类。

function Show(Class, Id)
{
    document.getElementById(Id).className = Class;
}

为此，您需要您的 a 是这样的：

<a href="#" onclick="show('section1links','section1b')">show section 1b</a>
于 2013-06-05T12:37:26.837 回答