带有jQuery的HTML唯一ID-解决此问题的更好方法

因此，我使用这个漂亮的小部件创建选项卡，但我的编辑器抱怨它无效，并且符合规范。正如你所看到的，我有两个相同的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>

{%如果不是，则为_通过%}

{%endif%}

表1
表2
$（文档）.ready（函数（）{
$（“#窗格”）.children（“div”）.hide（）；//最初隐藏所有内容
$（“#tabs li:first”）.attr（“id”，“current”）；//激活第一个选项卡
$（“#窗格div:first”）.fadeIn（）；//显示第一个选项卡内容
$（“#选项卡a”）。单击（功能（e）{
e、 预防默认值（）；
if（$（this）.lassest（“li”）.attr（“id”）==“current”）{//当前选项卡的检测
返回false；
}
否则{
$（“#窗格”）.children（“div”）.hide（）；//隐藏所有内容
$（“#tabs li”）.attr（“id”，”；//重置id的
$（this）.parent（）.attr（“id”，“current”）；//激活此
$（'#'+$（this.attr（'name'））.fadeIn（）；//显示当前选项卡的内容
}
返回false；
});
});

这里有两个问题：

在选项卡和选项卡内容上使用

#current

选项卡名称属性和选项卡内容id相同

将类用于当前而不是id

使用

addClass

，

removeClass

和

hasClass

当然，您必须将CSS从

#current

更改为

.current

并使用rel而不是name

<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>

{%如果不是，则为_通过%}

{%endif%}

表1
表2
$（文档）.ready（函数（）{
$（“#窗格”）.children（“div”）.hide（）；//最初隐藏所有内容
$（“#制表符li:first”）.addClass（“当前”）；//激活第一个制表符
$（“#窗格div:first”）.fadeIn（）；//显示第一个选项卡内容
$（“#选项卡a”）。单击（功能（e）{
e、 预防默认值（）；
if（$（this）.closest（“li”）.hasClass（“当前”）{//检测当前选项卡
返回false；
}
否则{
$（“#窗格”）.children（“div”）.hide（）；//隐藏所有内容
$（“#tabs li”）.removeClass（“当前”）；//重置
$（this）.parent（）.addClass（“当前”）；//激活此
$（'#'+$（this.attr（'rel'））.fadeIn（）；//显示当前选项卡的内容
}
返回false；
});
});

这里有两个问题：

在选项卡和选项卡内容上使用

#current

选项卡名称属性和选项卡内容id相同

将类用于当前而不是id

使用

addClass

，

removeClass

和

hasClass

当然，您必须将CSS从

#current

更改为

.current

并使用rel而不是name

<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>

{%如果不是，则为_通过%}

{%endif%}

表1
表2
$（文档）.ready（函数（）{
$（“#窗格”）.children（“div”）.hide（）；//最初隐藏所有内容
$（“#制表符li:first”）.addClass（“当前”）；//激活第一个制表符
$（“#窗格div:first”）.fadeIn（）；//显示第一个选项卡内容
$（“#选项卡a”）。单击（功能（e）{
e、 预防默认值（）；
if（$（this）.closest（“li”）.hasClass（“当前”）{//检测当前选项卡
返回false；
}
否则{
$（“#窗格”）.children（“div”）.hide（）；//隐藏所有内容
$（“#tabs li”）.removeClass（“当前”）；//重置
$（this）.parent（）.addClass（“当前”）；//激活此
$（'#'+$（this.attr（'rel'））.fadeIn（）；//显示当前选项卡的内容
}
返回false；
});
});

解决这个问题的方法是只使用唯一的ID，并且在文档中不要多次使用同一ID。同意-但这显然会破坏jquery。id用于打开/关闭选项卡。我不明白为什么不能使用唯一id。解决方法是只使用唯一id，并且在文档中不要多次使用同一id。同意-但这显然会破坏jquery。该id正用于打开/关闭选项卡。我不明白为什么您不能使用唯一id。您需要做得更好-请举例。做得好。你能解释一下这是如何解决身份问题的吗。我是否完全删除id=“Tab1”？如果是这样的话，这种关系是如何发生的？我只是这样做的，这样你就不会有多重电流，这是不允许的，而是。电流，这是可以的。您仍然需要#tab1等，好吧-但这实际上并没有解决问题？我仍然有一个name=tab1和id=tab1，这意味着我仍然有错误？id==名称。也许我错过了什么？FWIW-“重复或未解决的ID”，大大简化了问题。。基本上把名字改成rel。不需要更改“电流”。谢谢你需要做得更好-请举个例子。干得好。你能解释一下这是如何解决身份问题的吗。我是否完全删除id=“Tab1”？如果是这样的话，这种关系是如何发生的？我只是这样做的，这样你就不会有多重电流，这是不允许的，而是。电流，这是可以的。您仍然需要#tab1等，好吧-但这实际上并没有解决问题？我仍然有一个name=tab1和id=tab1，这意味着我仍然有错误？id==名称。也许我错过了什么？FWIW-“重复或未解决的ID”，大大简化了问题。。基本上把名字改成rel。不需要更改“电流”。谢谢