用html链接连接jquery函数

我在学习html和jquery。我的问题是，我想要根据用户点击的内容来修改框。例如，如果用户单击淡入淡出，则框应淡入淡出，并且幻灯片会使框滑动。我被困在如何连接一个盒子与多个功能和链接。用html链接连接jquery函数

<script type="text/javascript" src="jQuery-1.7.min.js"></script> 
<script type="text/javascript"> 

    $ (function() { 
     $('a').click(function() { 
      $('#box').fadeOut(3000); 
     }); 
    }); 

</script> 
</head> 

<body> 
<div id="box"></div> 
<li><a href="#">fade</a></li> 
<li><a href="#">slide down</a></li> 
<li><a href="#">slide right</a></li> 
</body> 
</html>

这里是CSS：

#box 
{ 
background: red; 
width: 300px; 
height: 300px; 
}

来源

2012-06-27 SimplyZ

使用的ID或类选择器选择不同的链路。 – zzzzBov

给你的锚ID和设置活动每个ID。

<li><a href="#" id="fade">fade</a></li> 
<li><a href="#" id="slided">slide down</a></li> 
<li><a href="#" id="slider">slide right</a></li>

和每个事件，做相应的动画

$('#fade').on('click', function() { 
      $('#box').fadeOut(3000); 
});

来源

2012-06-27 20:27:15

这里是一个[半心半意的jsFiddle]（http://jsfiddle.net/RichardTowers/Wr5ut/） – RichardTowers

谢谢一堆。太棒了。 – SimplyZ

移动你的功能集成到一个的document.ready声明，对您的LI的

$(document).ready(function() { 

$('a.fade').on("click", function(e) { 
    e.preventDefault(); 
    $('#box').fadeOut(3000); 
}); 

//rest of animate functions 

});

http://jsfiddle.net/GT9jh/

来源

2012-06-27 20:29:24

添加选择

你可能是这样的：jsFiddle example。

HTML

<div id="box"></div> 
<li><a rel="fade" href="#">fade</a></li> 
<li><a rel="slide down" href="#">slide down</a></li> 
<li><a rel="slide right" href="#">slide right</a></li>

的jQuery

$('a').click(function() { 
    effect = $(this).attr('rel').split(' ')[0]; 
    direction = $(this).attr('rel').split(' ')[1]; 
    $('#box').hide(effect, { direction: direction }, 1000); 
});

来源

2012-06-27 20:34:09 j08691

用html链接连接jquery函数

回答

相关问题