0

我想让我的网页成为 w3c 有效的。所以我逐步纠正错误以使其有效，我使用了 html5 doctype，我发现了一个错误

第 348 行，第 81 列：在 HTML5 + RDFa 1.1 Lite 文档中的 li 元素上不允许使用 RDFa 核心属性 rel。考虑改为检查 HTML5 + RDFa 1.1 模式。

所以我尝试替换 id 而不是 rel ， w3c 有效但代码不起作用。如何在不使用 rel 的情况下使用以下代码？

<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show(); 
$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).attr("rel"); 
    $("#"+activeTab).fadeIn(); 
});
});
</script> 
<ul class="tabs">
<li class="active" rel="tab2">&nbsp;&nbsp;Reviews&nbsp;&nbsp;</li><li rel="tab3">News</li><li rel="tab4">&nbsp;&nbsp;Articles&nbsp;</li></ul>


<div id="tab1" class="tab_content" style="width:326px;">data</div>
<div id="tab2" class="tab_content" style="width:326px;">data tab2</div>
4

2 回答 2

2

手动（不使用 Javascript）浏览 HTML，找到每个<li>元素，然后替换rel为id. 确保 id 在页面上是唯一的。因此，您必须将它们更改为liTab2,liTab3等。

然后，在您的 jQuery 中，替换$(this).attr("rel");为this.id.replace("li", "").toLowerCase();.

不完全确定您还在寻找什么答案......

于 2012-10-01T19:35:41.667 回答
2

对于与选项卡关联的所有li元素，请更改：

<li class="active" rel="tab2">&nbsp;&nbsp;Reviews&nbsp;&nbsp;</li>

至：

<li class="active" data-target="tab2">&nbsp;&nbsp;Reviews&nbsp;&nbsp;</li>

并改变

var activeTab = $(this).attr("rel");

至：

var activeTab = $(this).data("target");

请注意，这使用 jQuery 默认行为将 HTML5 data-* 属性拉入对象的数据集中。

于 2012-10-01T19:36:52.650 回答