Question

我有多个标签表，并且标签彼此相邻，因此当标签1打开时我在javascript中出错：$('.tabcont2:visible')[0].id未定义，而标签2打开时：$('.tabcont0:visible')[0].id id undefined，无论如何，希望你能从代码中理解一切：

<script type="text/javascript" src="/JS/tabcontent.js"></script>
<script type="text/javascript">
    function initMenu0() {
        $('#menu0 ul').hide();
        $('#menu0 li a').click(function() {
            var checkElement = $(this).next();
            if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                return false;
            }
            if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#menu0 ul:visible').slideUp('normal').siblings('a').removeClass('open_menu0');
                checkElement.slideDown('normal').siblings('a').addClass('open_menu0');
                return false;
            }
        });
        $("ul.reset a").click(function() {
            $(this).closest("ul").siblings("a").addClass("open_menu0");
        });
    }
    function showCurrentTab0() {
        var curId = $('.tabcont0:visible')[0].id,
            $curLink = $('a[rel="' + curId + '"]');

        $curLink.closest('ul').parent('li').children('a').click();
    }

    function initMenu2() {
        $('#menu2 ul').hide();
        $('#menu2 li a').click(function() {
            var checkElement = $(this).next();
            if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                return false;
            }
            if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#menu2 ul:visible').slideUp('normal').siblings('a').removeClass('open_menu2');
                checkElement.slideDown('normal').siblings('a').addClass('open_menu2');
                return false;
            }
        });

        $("ul.reset a").click(function() {
            $(this).closest("ul").siblings("a").addClass("open_menu2");
        });
    }
    function showCurrentTab2() {
        var curId = $('.tabcont2:visible')[0].id,
            $curLink = $('a[rel="' + curId + '"]');

        $curLink.closest('ul').parent('li').children('a').click();
    }

    $(document).ready(function() {
        initMenu0();
        showCurrentTab0();
        initMenu2();
        showCurrentTab2();
    });
</script>

和html代码：

<div class="block tabbox2">
 <div class="tabbox2">
    <ul id="gstabs2" class="reset">
        <li><a rel="g1" class="selected" href="#">Micae</a></li>
        <li><a rel="g2" href="#">Dahua</a></li>
    </ul>

    <div class="tabgreybox2">
        <div id="g1" class="tabcontent2">
            <div style="position:relative;min-height:430px;">
                <div style="position:absolute;left:-250px;top:-30px;">
                    <div id="gstabs1">
                        <ul id="menu0">
                            <li>
                                <a href="#">Mobil DVR</a>
                                <ul class="reset">
                                    <li><a rel="gs1" class="selected" href="#">MDVR</a></li>
                                    <li><a rel="gs2" class="selected" href="#">Client</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <div style="position:absolute;left:0;">
                    <div class="block tabbox0">
                        <div class="tabbox0">
                            <div class="tabgreybox0">
                                <div id="gs1" class="tabcont0">
                                MDVR
                                </div>
                                <div id="gs2" class="tabcont0">
                                Client
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                var countries=new ddtabcontent("gstabs1")
                countries.setpersist(true)
                countries.setselectedClassTarget("link")
                countries.init()
            </script>
        </div>
        <div id="g2" class="tabcontent2">
            <div style="position:relative;min-height:430px;">
                <div style="position:absolute;left:-250px;top:-30px;">
                    <div id="gstabs3">
                        <ul id="menu2">
                            <li>
                                <a href="#">Dökümanlar</a>
                                <ul class="reset">
                                    <li><a rel="s1" class="selected" href="#">PSS</a></li>
                                    <li><a rel="s2" href="#">DVR</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>  
                <div style="position:absolute;left:0;top:0;">
                    <div class="block tabbox0">
                        <div class="tabbox0">
                            <div class="tabgreybox0">
                                <div id="s1" class="tabcont2">
                                    PSS
                                </div>
                                <div id="s2" class="tabcont2">
                                    DVR
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                var countries=new ddtabcontent("gstabs3")
                countries.setpersist(true)
                countries.setselectedClassTarget("link")
                countries.init()
            </script>
        </div>
    </div>

    <script type="text/javascript">
        var countries=new ddtabcontent("gstabs2")
        countries.setpersist(true)
        countries.setselectedClassTarget("link")
        countries.init()
    </script> 
 </div>
</div>

Answer 1

交换

$('.tabcont0:visible')[0].id

与

$('.tabcont0:visible:first').attr('id');

jQuery将整理其余部分。

添加[0]将引用实际的DOM元素，而不是jQuerys元素。如果该原始元素不存在，则任何其他函数都将导致错误。

Answer 2

只是一个猜测，因为没有jsfiddle设置：

为了让jQuery认为元素是可见的，它们必须在页面上占据一席之地。由于父级为position: absolute;，因此无法使用:visible选择器。（http://api.jquery.com/visible-selector/）

:visible选择器是一个jquery扩展，可能使用.filter(":visible");也可以。

$（'。tabcont2：visible'）[0] .id未定义

2 个答案: