CSS and HTML UI issues
I am learning CSS and Jquery.. So now its a learning curve for me as I am newbie in these.. Here as per the code below, when the user clicks on the li tag the checkbox gets activated as well as the color also changes. And when the user clicks on the links it goes to the specified location. But I want the link to be directed to the specifed location when the user clicks on th开发者_JS百科e any part of li also. it would be great if this can be done using CSS..Any inputs..?? Please help.
<html>
<head>
<script type="text/javascript" src="http://editor.webyana.com/javascripts/client_scripts/potential/jquery.js"></script>
<script>
jQuery(function($) {
$("li.gc").click(function() {
$("li.gc").css({
'background-color': '#FFFFFF'
});
$(this).css({
'background-color': '#FDF7C2'
});
$("li.gc input[type=checkbox]").attr("checked", false);
$(this).find("input[type=checkbox]").attr("checked", true);
});
});
</script>
</head>
<body>
<ul>
<li class="gc ">
<div>
<input type="checkbox"/>
<a href="http://www.google.com">Link1</a>
</div>
</li>
<li class="gc">
<div>
<input type="checkbox"/>
<a href="http://www.google.com">Link2</a>
</div>
</li>
</ul>
</body>
</html>
Under your .attr("checked", true); line, add this:
window.location = $(this).find('a')[0].href;
After testing, I realised that you need to stop the .click() if it's on the checkbox, so also add:
$("li.gc input").click(function(e) {
e.stopPropagation();
});
加载中,请稍侯......
精彩评论