Question

以下是我正在使用的代码。现在，标签部分工作正常，它在标签之间切换。问题是我在div中有一个图像，每个选项卡底部都有一个名为“showMem”的类。该链接应该打开最后一个选项卡，但它不起作用。我打开标签的代码是JQuery Docs。任何的想法？先感谢您。

 <script type="text/javascript">
    $(document).ready(function () {

    var $tabs = $('#tabs').tabs(); // first tab selected

        $('.showMem').click(function() { // bind click event to link
            $tabs.tabs('select', 4); // switch to third tab
            return false;
                }).css({
                    cursor : 'pointer'
        });

        var $items = $('#tabs>ul>li');
        var $theImg = $('#tabs>ul>li>a>img');
        $items.click(function () {
            $items.removeClass('selected');
            $(this).addClass('selected');
            if ($items.index($(this)) == 0) { //Intro

                $items.removeClass('tab1Selected');
                $items.removeClass('tab2Selected');
                $items.removeClass('tab3Selected');
                $items.removeClass('tab4Selected');
                $items.removeClass('tab5Selected');
                $(this).addClass('tab1Selected');

            }
            else if ($items.index($(this)) == 1) { //About
                $items.removeClass('tab1Selected');
                $items.removeClass('tab2Selected');
                $items.removeClass('tab3Selected');
                $items.removeClass('tab4Selected');
                $items.removeClass('tab5Selected');
                $(this).addClass('tab2Selected');
            }
            else if ($items.index($(this)) == 2) { //Content
                $items.removeClass('tab1Selected');
                $items.removeClass('tab2Selected');
                $items.removeClass('tab3Selected');
                $items.removeClass('tab4Selected');
                $items.removeClass('tab5Selected');
                $(this).addClass('tab3Selected');
            }
            else if ($items.index($(this)) == 3) { //New Format
                $items.removeClass('tab1Selected');
                $items.removeClass('tab2Selected');
                $items.removeClass('tab3Selected');
                $items.removeClass('tab4Selected');
                $items.removeClass('tab5Selected');
                $(this).addClass('tab4Selected');
            }
            else if ($items.index($(this)) == 4) { //Membership
                $items.removeClass('tab1Selected');
                $items.removeClass('tab2Selected');
                $items.removeClass('tab3Selected');
                $items.removeClass('tab4Selected');
                $items.removeClass('tab5Selected');
                $(this).addClass('tab5Selected');
            }
            var index = $items.index($(this));
            $('#tabs>div').hide().eq(index).show();
        }).eq(0).click();

    });
</script> 



 <div id="tabs" class="ui-tabs">
    <img src="myimage.jpg" />
    <ul class="ui-tabs-nav">
        <li class="tab1"></li>
        <li class="tab2"></li>
        <li class="tab3"></li>
        <li class="tab4"></li>
        <li class="tab5"></li>
    </ul>

    <div id="tabs-1">
       <div class="showMem">image</a>
    </div>
    <div id="tabs-2">
        <p>blah blah blah</p>
        <div class="showMem">image</div>
    </div>
    <div id="tabs-3">
        <p>Blah blah blah </p>
        <div class="showMem">image</div>
    </div>
    <div id="tabs-4">
        <p>blach blah blach</p>
        <div class="showMem">image</div>
    </div>
    <div id="tabs-5">
        <p>blah</p>
        <div class="showMem">image</div>
    </div>
</div>

Answer 1

我不确定这是否是复制和粘贴错误，但我发现了一些错误。我将你的代码粘贴到JsFiddle，标记不正确，你有一些div嵌套问题，标签中没有锚点，所以它们不起作用

在某些地方，您可以将图像链接作为div开始，然后以结束'a'标记结束。

<div class="showMem">image</a>

您似乎也试图在使用jquery的情况下实现自己的标签系统 UI标签。这是不必要的。如果您还没有，我建议您使用FireBug。这立即显示您的标记错误。在那之后，它非常直接。

您可以看到，当您应用jquery ui选项卡时，它会向您的元素添加许多css类。您可以选择包含标准css，也可以编写自己的类来使行为正常工作。在JsFiddle中，我简单地整理了你的标记，在标签上添加了一些锚点以使它们工作，并添加了一些css以使它们看起来像标签。

修改

我还编辑了你自己的jsfidde here并在标记中添加了注释，以显示你出错的地方。

希望这有帮助。

jquery选项卡中的链接不会打开其他选项卡

1 个答案: