Question

我有以下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和Tab2.Png是我的标题标题，div id :cont-1-1 and 2-1是标签内容，我不想为此使用任何jquery插件，只需要点击选项卡，隐藏和显示内容时需要简单的东西

这就是我想要的：

$(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();
                    });

感谢

Answer 1

执行此操作的最佳方法（仅使用JavaScript / jQuery）是在div（或跨度等）中包装“标签”，然后将其所有css显示设置为无（默认的第一个选项卡除外）。然后点击，您可以根据需要隐藏/显示。

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

此示例假设具有id pic1的元素是“被点击”的“标签”，并且还有3个其他标签（pic2，pic3，＆amp; 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（“显示”，无）并将显示设置为正常和元素的自然显示）等等，但没有使用这里的所有行，它要么在IE中不起作用，要么在FireFox中不起作用，或两者兼而有之。

另外，你可能会认为你可以使用显示“初始”而不是“内联”或“块”或者重新显示的元素的默认显示，但我永远无法以这种方式工作，我自己。

Answer 2

使用jQueryUI Tabs

怎么样？

如果你真的知道你正在开发的东西将来不太可能发生变化而且永远不会那么复杂，那么自己创建标签就好了。

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

如何使用jquery制作自定义选项卡？

2 个答案: