0

我有以下 html，我想使用 jquery 制作简单的标签

<td style="border-color: black; border-style: solid; border-width: 1px 0 1px 1px;">
    <div id="cont-1-1">
        My first tab content
    </div>
    <div id="cont-2-1">
        My second tab content
    </div>
</td>
<td style="width: 30px">
    <div id="tab-box">
    <div style="height: 121px;"><img class="cont-1-1" src="/Images/Tab1.png" /></div>
    <div style="border-left: 1px solid Black;"><img class="cont-2-1" src="/Images/Tab2.png" /></div>
    <div style="border-left: 1px solid Black; height: 40px;"></div>
    </div>
</td>
</td>

我的选项卡标题在哪里Tab1.Png以及是选项卡内容，我不想为此使用任何 jquery 插件，只需要在单击选项卡时进行一些简单的操作，隐藏和显示内容Tab2.Pngdiv id :cont-1-1 and 2-1

这就是我正在尝试的：

$(document).ready(function () {
                $('#tab-box').each(function () {
                    // For each set of tabs, we want to keep track of
                    // which tab is active and it's associated content
                    var $active, $content, $links = $(this).find('img');

                    // If the location.hash matches one of the links, use that as the active tab.
                    // If no match is found, use the first link as the initial active tab.
                    $active = $(Find First Tab from div);
                    $active.addClass('active');
                    $content = $($active.attr('class'));

                    // Hide the remaining content
                    $links.not($active).each(function () {
                        $($(this).attr('href')).hide();
                    });

谢谢

4

2 回答 2

0

最好的方法（仅使用 JavaScript/jQuery）是在 div（或 spans 等）中包装你的“选项卡”，然后将它们的所有 css 显示设置为无（默认的第一个选项卡除外）。然后在点击时，您可以根据需要隐藏/显示。

使它跨浏览器兼容需要一些额外的（仅几行），但我已经不止一次这样做了。

此示例假定 id 为 pic1 的元素是被“单击”的“选项卡”，并且还有 3 个其他选项卡（pic2、pic3 和 pic4）。根据您希望页面设置的方式（使用箭头，或通过单击突出的未突出显示的选项卡等）将这些命令放在您需要的每个 .click 函数中（分别隐藏和显示必要的页面）。

$(document).ready(function (){
$("#pic1").click(function (){
    $("#pic1").prop("hidden", false);
    $("#pic2").prop("hidden", true);
    $("#pic3").prop("hidden", true);
    $("#pic4").prop("hidden", true);
    $("#pic1").css("display", "inline");  //if using div, use display block instead
    $("#pic1").css("display", "normal");
    $("#pic2").css("display", "none");
    $("#pic3").css("display", "none");
    $("#pic4").css("display", "none");
});
});

我不确定为什么你必须如此冗余（同时使用“隐藏”和 .css("display", none) 并将显示设置为元素的正常显示和自然显示）等，但没有使用所有在这里，它要么在 IE 中不起作用，要么在 FireFox 中不起作用，或者两者兼而有之。

此外，您可能认为您可以使用显示“初始”而不是“内联”或“块”或任何默认显示用于重新显示的元素，但我自己永远无法让它以这种方式工作。

于 2012-11-16T17:10:07.500 回答
0

使用jQueryUI 选项卡怎么样

如果你真的知道你正在开发的东西在未来不太可能改变并且永远不会那么复杂，那么你可以自己创建标签。

否则，为什么不使用提供您将来可能需要的可扩展性的坚如磐石的库。

于 2012-11-16T17:15:41.857 回答