jquery的问题

yykkyy 2012-03-30 01:46:20

<ul class="list">
<li><a href="www.baidu.com">baidu</a></li>
<li><a href="www.sina.com">sina</a></li>
<li><a href="www.5173.com">5173</a></li>
</ul>

上面是html中的代码，下面是jquery的代码，我想通过点击li空白处，触发下面的a标签的点击事件

<script type="text/javascript">

$(function(){
$('.list li').click($(this).find('a').click())

})

$(function(){
$('.list li a').click(function(){alert($(this).attr('href'));})

})
</script>

...全文

89 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

yykkyy 2012-03-31

打赏
举报

自己解决了，就在自己原代码上加了句阻止冒泡的
<ul class="list">
<li><a href="www.baidu.com">baidu</a></li>
<li><a href="www.sina.com">sina</a></li>
<li><a href="www.5173.com">5173</a></li>
</ul>
</form>

<script type="text/javascript">

$(function(){
$('.list li').click(function(){$(this).find('a').click();})

})

$(function(){
$('.list li a').click(function(){alert($(this).attr('href'));return false;})

})
</script>

三石-gary 2012-03-31

打赏
举报

[Quote=引用 11 楼的回复:]

引用 10 楼的回复:

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<……
[/Quote]
那就这需要你自己去改了。。我们只能针对你提出来的问题帮你解决。。既然知道提类似的问题。。那也就知道类似的方法。。

yykkyy 2012-03-31

打赏
举报

[Quote=引用 10 楼的回复:]

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></t……
[/Quote]
如果a的click只有一个alert，这样子改没问题了，但是里面有很多函数和其他代码，我这里alert只是随意替代，看效果的

三石-gary 2012-03-30

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="http://code.jquery.com/jquery-latest.js"></script> 

    <script type="text/javascript">



        $(function () {

            $('.list li').click(function () {

                alert($(this).find('a').attr('href'));

                

            });



        })



        

</script>

</head>

<body>

<ul class="list">

<li><a href="www.baidu.com">baidu</a></li>

<li><a href="www.sina.com">sina</a></li>

<li><a href="www.5173.com">5173</a></li>

</ul>

</body>

</html>

这样不就行了吗？

yykkyy 2012-03-30

打赏
举报

现在先把a标签宽度设置成和li标签一样宽凑合着用吧，jq还要深入学习啊

Acesidonu 2012-03-30

打赏
举报

[Quote=引用 5 楼的回复:]
楼主是想实现将A的点击链接行为扩展到 li一整行吧？
是的话不用任何js代码写一个CSS就行了

CSS code

#ul1{
background-color:Gray;width:200px;
}
#ul1 li a{display:block;}

HTML code

<ul id="ul1">
<li><a href="http://www.cs……
[/Quote]
++



<style type="text/css">

.list li {

	margin: 3px;

	width: 100px;

	height: 30px;

	background-color: #eee;

}

.list a {

	width: 100%;

	height: 100%;

	line-height: 30px;

	display: block;

}

</style>

yykkyy 2012-03-30

打赏
举报

zsx841021的代码还是要在超链接上点击才有用，我发现我的代码还有问题，a的click事件应该要阻止冒泡，否则是死循环

zhouyun869072948 2012-03-30

打赏
举报

同意zsx841021的代码，我觉得你还是把事件放到a标签上面的好，不觉的这么做很麻烦吗？如果在点击的时候对li标签有特殊处理，也可以通过事件冒泡来处理

wzhiyuan 2012-03-30

打赏
举报

楼主是想实现将A的点击链接行为扩展到 li一整行吧？
是的话不用任何js代码写一个CSS就行了



#ul1{

background-color:Gray;width:200px;

}

#ul1 li a{display:block;}

<ul id="ul1">

<li><a href="http://www.csdn.net">CSDN<a/></li>

</ul>

三石-gary 2012-03-30

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="http://code.jquery.com/jquery-latest.js"></script> 

    <script type="text/javascript">



        $(function () {

            $('.list li').click(function () {

                $(this).find('a').click(function () {

                    alert($(this).attr('href')); 

                });

            })



        })



        

</script>

</head>

<body>

<ul class="list">

<li><a href="www.baidu.com">baidu</a></li>

<li><a href="www.sina.com">sina</a></li>

<li><a href="www.5173.com">5173</a></li>

</ul>

</body>

</html>

是要这样？

Acesidonu 2012-03-30

打赏
举报

直接在li上绑定事件不就行了

三石-gary 2012-03-30

打赏
举报

<script type="text/javascript">



$(function(){

$('.list li').click(function(){

$(this).find('a').click(function(){

alert($(this).attr('href'));

})

})



})

</script>

是这效果吗？

yykkyy 2012-03-30

打赏
举报

<ul class="list">
<li><a href="www.baidu.com">baidu</a></li>
<li><a href="www.sina.com">sina</a></li>
<li><a href="www.5173.com">5173</a></li>
</ul>
</form>

<script type="text/javascript">

$(function(){
$('.list li').click(function(){$(this).find('a').click();})

})

$(function(){
$('.list li a').click(function(){alert($(this).attr('href'));})

})
</script>

发现少写了function，但是还是有点问题，他会不停的alert