I am working on a small script where there are some list items. If you refer to the below code you will notice that there are 15 list items. Now I just want to display 9 of them say the user log's in the 1st time the first nine should be displayed now if he clicks on list no. 7 then list no 3, 4, 5, 6, 7, 8, 9, 10, 11 should be displayed.
Will I have to give id to each and every list?
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/library/styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="list1">
<li><a href="1">1</a></li>
<li><a href="2">2</a></li>
<li><a href="3">3</a></li>
<li><a href="4">4</a></li>
<li><a href="5">5</a></li>
<li><a href="6">6</a></li>
<li><a href="7">7</a></li>
<li><a href="8">8</a></li>
<li><a href="9">9</a></li>
<li><a href="10">10</a></li>
<li><a href="11">11</a></li>
<li><a href="12">12</a></li>
<li><a href="13">13</a></li>
<li><a href="14">14</a></li>
<li><a href="15">15</a></li>
</ul>
<!-- start: javascripts -->
<script type="text/javascript">
var ul = document.getElementById("list1");
var liNodes = [];
开发者_开发技巧 for (var i = 0; i < ul.childNodes.length; i++) {
if (ul.childNodes[i].nodeName == "LI") {
liNodes.push(ul.childNodes[i]);
}
}
document.write("LiNodes:" +liNodes.length);
if (liNodes.length < 9) {
display_nine();
}
function display_nine() {
}
</script>
<!-- end: javascripts -->
</body>
</html>
You could do this with CSS and JavaScript or just JavaScript.
CSS:
to Hide
display: none;
to Show
display: block;
Then give each an id. Set the hidden to display:none then in JavaScript set to block when the user clicks on number 7.
OR
JavaScript:
Write the HTML of the List based on user interaction
document.write('<li><a href="13">13</a></li>');
And use a function call for Number Seven to write the entire list when clicked.
You could also place this in a DIV and re-write the list in the DIV based on user interaction.
精彩评论