<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(".has_children").click(function () {
$(this).addClass("highlight")
.children("a").show().end()
.siblings().removeClass("highlight")
.children("a").hide();
});
</script>
<style type="text/css">
#menu
{
width: 300px;
}
.has_children
{
background: #555;
color: #fff;
cursor: pointer;
}
.highlight
{
color: #fff;
background: green;
}
div
{
padding: 0;
margin: 10px 0;
}
div a
{
background: #888;
display: none;
float: left;
width: 300px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="menu">
<div class="has_children">
<span>第1章-认识jQuery</span> <a>1.1aaaaaaaa</a> <a>1.1aaaaaaaa</a> <a>1.1aaaaaaaa</a>
<a>1.1aaaaaaaa</a> <a>1.1aaaaaaaa</a>
</div>
<div class="has_children">
<span>第2章-认识jQuery</span> <a>1.2aaaaaaaa</a> <a>1.2aaaaaaaa</a> <a>1.2aaaaaaaa</a>
<a>1.2aaaaaaaa</a> <a>1.2aaaaaaaa</a>
</div>
<div class="has_children">
<span>第3章-认识jQuery</span> <a>1.3aaaaaaaa</a> <a>1.3aaaaaaaa</a> <a>1.3aaaaaaaa</a>
<a>1.3aaaaaaaa</a> <a>1.3aaaaaaaa</a>
</div>
</div>
</form>
</body>
</html>
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(".has_children").click(function () {
$(this).addClass("highlight")
.children("a").show().end()
.siblings().removeClass("highlight")
.children("a").hide();
});
</script>
<style type="text/css">
#menu
{
width: 300px;
}
.has_children
{
background: #555;
color: #fff;
cursor: pointer;
}
.highlight
{
color: #fff;
background: green;
}
div
{
padding: 0;
margin: 10px 0;
}
div a
{
background: #888;
display: none;
float: left;
width: 300px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="menu">
<div class="has_children">
<span>第1章-认识jQuery</span> <a>1.1aaaaaaaa</a> <a>1.1aaaaaaaa</a> <a>1.1aaaaaaaa</a>
<a>1.1aaaaaaaa</a> <a>1.1aaaaaaaa</a>
</div>
<div class="has_children">
<span>第2章-认识jQuery</span> <a>1.2aaaaaaaa</a> <a>1.2aaaaaaaa</a> <a>1.2aaaaaaaa</a>
<a>1.2aaaaaaaa</a> <a>1.2aaaaaaaa</a>
</div>
<div class="has_children">
<span>第3章-认识jQuery</span> <a>1.3aaaaaaaa</a> <a>1.3aaaaaaaa</a> <a>1.3aaaaaaaa</a>
<a>1.3aaaaaaaa</a> <a>1.3aaaaaaaa</a>
</div>
</div>
</form>
</body>
</html>
<script type="text/javascript">
$(".has_children").click(function () {
$(this).addClass("highlight")
.children("a").show().end()
.siblings().removeClass("highlight")
.children("a").hide();
}); $(".has_children")加个点是怎么回事?
找标记ID 用$("#ID") 找HTML标记用$(HTMl)
$("div.has_children").click(function () {
$(this).addClass("highlight")
.children("a").show().end()
.siblings().removeClass("highlight")
.children("a").hide();
});
})
<script type="text/javascript">
$(function(){
$(".has_children").click(function () {
$(this).addClass("highlight")
.children("a").show().end()
.siblings().removeClass("highlight")
.children("a").hide();
});
});
</script>
这就有反应了
$(function(){
$(".has_children").click(function () {
$(this).addClass("highlight")
.children("a").show().end()
.siblings().removeClass("highlight")
.children("a").hide();
});
});
</script>
这样写就行了,哈哈