gpt4 book ai didi

javascript - 带有生成的 div 的目标伪类

转载 作者:行者123 更新时间:2023-11-28 11:38:22 24 4
gpt4 key购买 nike

我创建了一个页面,该页面使用 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。

那么什么是最好的方法(纯 HTML/CSS 或 jQuery)来让在初始 URL 上选择的目标 div 在初始加载时被选中?

最佳答案

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

这一切都在文档准备就绪时发生。这显示了一个选择器(您可以使用任何您想要的选择器),然后第二部分是一个 jQuery .addClass() 方法,您可以将任何您想要的类添加到该选定元素。

另外,因为你的 url 末尾的散列没有像你希望的那样使链接“活跃”,这可能是因为元素可能实际上没有接收到“:active”伪类,除非点击事件实际上被触发了。我相信 url 末尾的散列只是告诉页面去哪里。

关于javascript - 带有生成的 div 的目标伪类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20808742/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com