I have designed a webpage that utilizes the CSS :target selector to determine which tab of information should be displayed. These tabs are generated dynamically through AJAX-loaded data when the page is initially loaded. Below is a snippet of code showcasing how this functionality works:
<!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 lastCategory = "";
for (var i=0; i<storeList.length; i++) {
if (storeList[i].category != lastCategory) {
lastCategory = storeList[i].category;
$("#display").append('<div id="'+lastCategory+
'"><a href="#'+lastCategory+'">'+lastCategory+
'</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>
You can view this page at
Upon initial loading of the page (example, "testtarget.htm#Linen"), the Linen div is not selected automatically. However, clicking on any of the links functions correctly to select the respective div. It seems like the target property is not being applied to the generated div.
Hence, I am seeking the most effective way (whether pure HTML/CSS or using jQuery) to ensure that the target div specified in the initial URL is selected upon the page's first load.