Question

所以我使用这个漂亮的小小部件来创建标签，但我的编辑抱怨它无效并且根据规范是真的。正如你所看到的，我有两个同名的id。我的问题是解决这个问题的正确方法是什么？

这是html

<ul id="tabs">
    <li><a href="javascript:void(0)" name="tab1">Stuff</a></li>
    {% if not is_passing %}
        <li><a href="javascript:void(0)" name="tab2">More Stuff</a></li>
    {% endif %}
</ul>

<div id="panes">
    <div id="tab1">Tab 1</div>
    <div id="tab2">Tab 2</div>
</div>

<script style="text/javascript">
    $(document).ready(function() {
        $("#panes").children("div").hide();         // Initially hide all content
        $("#tabs li:first").attr("id","current");   // Activate first tab
        $("#panes div:first").fadeIn();             // Show first tab content

        $('#tabs a').click(function(e) {
            e.preventDefault();
            if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
                return false;
            }
            else{
                $("#panes").children("div").hide();     //Hide all content
                $("#tabs li").attr("id","");            //Reset id's
                $(this).parent().attr("id","current");  // Activate this
                $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
            }
            return false;
        });
    });
</script>

Answer 1

这里有两个问题：

在标签和标签内容上使用#current
标签名称属性和标签内容标识相同

将类用于当前而不是id

使用addClass，removeClass和hasClass

当然，您必须将CSS从#current更改为.current

使用rel代替名称。

<ul id="tabs">
    <li><a href="javascript:void(0)" rel="tab1">Stuff</a></li>
    {% if not is_passing %}
        <li><a href="javascript:void(0)" rel="tab2">More Stuff</a></li>
    {% endif %}
</ul>

<div id="panes">
    <div id="tab1">Tab 1</div>
    <div id="tab2">Tab 2</div>
</div>


<script style="text/javascript">
    $(document).ready(function() {
        $("#panes").children("div").hide();         // Initially hide all content
        $("#tabs li:first").addClass("current");   // Activate first tab
        $("#panes div:first").fadeIn();             // Show first tab content

        $('#tabs a').click(function(e) {
            e.preventDefault();
            if ($(this).closest("li").hasClass("current")){ //detection for current tab
                return false;
            }
            else{
                $("#panes").children("div").hide();     //Hide all content
                $("#tabs li").removeClass("current");            //Reset
                $(this).parent().addClass("current");  // Activate this
                $('#' + $(this).attr('rel')).fadeIn(); // Show content for current tab
            }
            return false;
        });
    });
</script>

使用jQuery的HTML唯一ID - 更好的解决方法

1 个答案: