Форум

Nfyaka · #1 (**permalink**) 22.12.2010, 19:21

Мне нужно сделать так, чтобы при нажатии на определенную вкладку, появлялась ссылка, при нажатии на которую появляется сообщение. Для обработки нажатия и на вкладку, и на ссылку использую .click(). Для ссылок не работает.
Возможно ли вообще делать обработку нажатия мышью для обоих кликом? Или это совсем ни в какие ворота не лезет?

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

	<head>
		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<script type="text/javascript">
		
		function load()
		{

		//табы
		$('ul.tabs a').click(function () 
		{

			$('ul.tabs a').removeClass('selected');
		   	$('#header a').removeClass('sel');

		   	$(this).addClass('selected');
	    	
			if($(".selected").attr('id')=='tab_photos')
				$('#header').html('<a id="collections" href="javascript:void(null);">COLLECTIONS</a>'); 
	
			if($(".selected").attr('id')=='tab_news')
				$('#header').html('<a id="galleries" href="javascript:void(null);">GALLERIES</a>');
			
    	});

		//ссылки
		$('#header a').click(function()
		{
			
			$('#header a').removeClass('sel');
			$(this).addClass('sel');

			if($(".sel").attr('id')=='collections')
				alert('collections');
			else
				alert('galleries');
		});

		}
		
		</script>
	</head>
	
	<body onload="load();">
	
	<div id="gadget">
				<ul class="tabs">
		        		<li><a id="tab_photos" href="javascript:void(null);">PHOTOS</a></li>
  						<li><a id="tab_news" href="javascript:void(null);">NEWS</a></li>
  				</ul>
  				<div id="header">
  				HEADER
  				</div>
	</div>
	</body>
</html>

kadabrik · #2 (**permalink**) 22.12.2010, 19:28

Нужно прописать в href вместо "javascript:void(null);" "javascript:нужная_функция()"

Nfyaka · #3 (**permalink**) 22.12.2010, 20:08

то есть все-таки click() в любом случае не прокатит?

x-yuri · #4 (**permalink**) 23.12.2010, 06:39

лучше делать так:

<!DOCTYPE HTML>
<html>
  <head>   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  </head>
  <body>

<ul class="tabs">
    <li><a href="#">PHOTOS</a>
    <li><a href="#">NEWS</a>
</ul>
<div class="contents">
    <a id="link1" href="#">ссылка 1</a>
</div>
<div class="contents"> 
    <a id="link2" href="#">ссылка 2</a>
</div>

<script type="text/javascript">
$('.contents:gt(0)').css('display', 'none');

$('.tabs').click(function( e ){
    var links = $('.tabs a');
    var found;
    for( var i=0; i<links.length; i++ )
        if( e.target == links[i] ){
            found = true;
            break;
        }
    if( found ){
        $('.contents').css('display', 'none');
        $('.contents:eq('+i+')').css('display', '');
    }
});

$('#link1').click(function(){
    alert('ссылка 1');
});

$('#link2').click(function(){
    alert('ссылка 2');
});
</script>

  </body>
</html>

Nfyaka · #5 (**permalink**) 23.12.2010, 14:01

Спасибо!

Форум

Справочник

Discord чат

Курсы javascript