<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery(".leftBar fl ul li a").hover(function () {
jQuery(this).addClass("hover")
},
function () {
jQuery(this).removeClass("hover")
});
});
</script>
---------------------------------------------------
<div class="leftBar fl">
<ul class="liftNav">
<li><a class="hover" href="products.aspx?id=1" title="">点击1</a></li>
<li><a class="" href="products.aspx?id=2" title="">点击2</a></li>
<li><a class="" href="products.aspx?id=3" title="">点击3</a></li>
</ul>
</div>
我想当 点击 1或者3的时候 就往 class="" 里面添加一个 “hover" ,上面3条数据只能有一条Class 有hover
我上面写的实现不了,请教各位了
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery(".leftBar fl ul li a").hover(function () {
jQuery(this).addClass("hover")
},
function () {
jQuery(this).removeClass("hover")
});
});
</script>
---------------------------------------------------
<div class="leftBar fl">
<ul class="liftNav">
<li><a class="hover" href="products.aspx?id=1" title="">点击1</a></li>
<li><a class="" href="products.aspx?id=2" title="">点击2</a></li>
<li><a class="" href="products.aspx?id=3" title="">点击3</a></li>
</ul>
</div>
我想当 点击 1或者3的时候 就往 class="" 里面添加一个 “hover" ,上面3条数据只能有一条Class 有hover
我上面写的实现不了,请教各位了
jQuery(".leftBar ul li a").hover(function () {
jQuery(this).addClass("hover")
},
function () {
jQuery(this).removeClass("hover")
});
});
<head>
<title>交替的为表格添加样式和button显示隐藏事件</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('tr:odd').addClass('odd');
$('tr:even').addClass('even');
$('tr:contains("Henry")').addClass('highlight');
$('th').parent().addClass('table-heading');
// $('#btnToggle').toggle(function () {
// $('table').addClass('hidden');
// }, function () {
// $('table').removeClass('hidden');
// });
$('#btnToggle').click(function () {
$('table').toggleClass('hidden');
});
$('#btnToggle').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
});
</script>
<style type="text/css">
.odd
{
background-color:Pink;
}
.even
{
background-color:#cef;
}
.highlight
{
color:#f0f; font-weight:bold;
}
.table-heading
{
background-color:Yellow; font-weight:bolder;
}
.hidden
{
display:none;
}
.hover
{
cursor:pointer;
background-color:Green;
font-size:12px;
}
</style>
</head>
<body>
<table style="text-align:center" border="1px" cellpadding="3px" cellspacing="0px">
<tr>
<th>Title</th>
<th>Category</th>
</tr>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
</tr>
<tr>
<td>All's Well That Ends Well</td>
<td>Comedy</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Romeo And Juliet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Henry IV,Part I</td>
<td>History</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
</tr>
</table>
<input type="button" id="btnToggle" value="显示,隐藏"/>
</body>
</html>
jQuery(".liftNav li a").hover( function () {
jQuery(this).addClass("hover");
}, function () {
jQuery(this).removeClass("hover")
});
});你的selector写的有问题
jQuery(".liftNav li a").hover( function () {
jQuery(this).addClass("hover");
}, function () {
jQuery(this).removeClass("hover")
});
});这样也没有反应哦
楼主,看看我的那个demo,可以帮你解决问题。
<li><a class="" href="products.aspx?id=1" title="">点击1</a></li>
<li><a class="" href="products.aspx?id=2" title="">点击2</a></li>
<li><a class="" href="products.aspx?id=3" title="">点击3</a></li>
</ul>
<style>
.hover{background:red}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var s = location.search?location.search:"?id=1";
s = s.replace(/\?/g,"\\?");
$(".leftBar ul li a").each(function(){
var re = new RegExp(s + "$","i");
if(re.test($(this).attr("href"))) $(this).addClass("hover");
})
});
</script>
<div class="leftBar fl">
<ul class="liftNav">
<li><a class="" href="products.aspx?id=1" title="">点击1</a></li>
<li><a class="" href="products.aspx?id=2" title="">点击2</a></li>
<li><a class="" href="products.aspx?id=3" title="">点击3</a></li>
</ul>
</div>