用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函數

回答

相關問題