Question

我创建了一个使用CSS：target选择器的页面来选择要显示的信息选项卡。选项卡是在页面加载时从加载AJAX的数据动态创建的。显示功能的示例代码在此处：

<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
<style>
    #store div.tabs > div > a { background: #900;}
    #store div.tabs > div:target > a { background:#090;}
</style>
    <title>Test</title>
</head>
<body>
<script type="text/javascript">
function setStore() {
    var lastCat = "";
    for (var i=0;  i<storeList.length; i++) {
        if (storeList[i].category != lastCat) {
            lastCat = storeList[i].category;
            $("#display").append('<div id="'+lastCat+
                                    '"><a href="#'+lastCat+'">'+lastCat+
                '</a><div class="content"></div></div>');
        }
    }
}
function getStore() {
    function startWithStore(jcal) {
        storeList = JSON.parse(jcal);
        setStore();
    }
    $.ajax({
            url: 'getStore.php',
            type: "POST",
            success: startWithStore
    });
}
$(function() {
    getStore('display');
});
</script>

<div id='store'>
<div class="tabs" id='display'></div>
</div>
</body>
</html>

此页面位于http://royalbluetraders.com/testtarget.htm#Linen

当页面最初加载时（例如“testtarget.htm＃Linen”），未选择Linen div，但单击任何链接可以正确选择该div。似乎目标属性未应用于生成的div。

那么在初始加载时选择初始URL上选择的目标div的最佳方法（纯HTML / CSS或jQuery）是什么？

Answer 1

$(function() {
    $('.mylinks:first-child').addClass('makemelookgreen');
});

这一切都在文档准备好时发生。这显示了一个选择器（你可以使用你想要的任何选择器），然后第二个部分是一个jQuery .addClass（）方法，你可以将你想要的任何类添加到所选元素。

此外，因为你网址末尾的哈希没有像你希望的那样使链接'活动'，可能是因为可能的元素实际上并没有接收'：active'伪类，除非click事件实际上被触发了。我相信网址末尾的哈希只是告诉页面去哪里。

使用生成的div来定位伪类

1 个答案: