0

所以我使用这个漂亮的小部件来创建选项卡，但我的编辑器抱怨它无效并且根据规范是正确的。如您所见，我有两个名称相同的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>
4

1 回答 1

3

这里有两个问题：

  1. #current在标签和标签内容上使用
  2. 具有选项卡名称属性和选项卡内容 id 相同

使用当前类而不是 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>
于 2012-07-20T22:19:47.433 回答