1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

jquery function problem

Discussion in 'jQuery' started by seo_newbie_, Mar 7, 2010.

0
  1. #1
    I have a problem with jquery. What I would like to make is that a tab will change a class when somebody clicks on it. Everything else works ok, excepting this. I spent couple of hours on this and it still doesn't work. It works only when I click on a tab 1st time, but than not anymore.

    I tried to include click function inside another function and also many other combinations and still doesn't work. I would be so glad if anybody can tell me where exactly I should include the last click function.

    <html>
	<head>
		<title>jQuery: AJAX Tabs</title>	
    <link rel="stylesheet" type="text/css" href="class.css" /> link 
		<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
		<script type="text/javascript"> 

		
			$(document).ready(function()
			{    	
				$("#tab1").click(function()
				{
					$.ajax(
		        {
	            url: "tab1.html", 
	            cache: false,
	            success: function(message) 
	            {			            	
                $("#tabcontent").remove();
                $(".container").append(message);			          				          
	            }
		        });	
        });
				
				$("#tab2").click(function()
				{
					$.ajax(
		        {
	            url: "tab2.html", 
	            cache: false,
	            success: function(message) 
	            {			            	
                $("#tabcontent").remove();
                $(".container").append(message);
                         
	            }
		        });	
        });
			
      $("#tab1").click(function()
				{
          $(".navcontainer").empty();
			    $(".navcontainer").append("<ul><li><a id='tab1' class='selected' href='#'>Tab 1</a></li><li><a id='tab2' class='unselected' href='#'>Tab 2</a></li></ul>");             
        });              

      $("#tab2").click(function()
				{ 
          $(".navcontainer").empty();
			    $(".navcontainer").append("<ul><li><a id='tab1' class='unselected' href='#'>Tab 1</a></li><li><a id='tab2' class='selected' href='#'>Tab 2</a></li></ul>");             
        }); 
      });
		</script>
		
	</head>
	<body>
		<a href="http://jetlogs.org/2008/03/17/jquery-ajax-tabs/">&laquo; Code Explanation</a> | <a href="jquery_ajax_tabs.zip">Download Source</a>
		<p>&nbsp;</p>		
		<div class="container">
			<div class="navcontainer">
				<ul>
					<li><a id="tab1" href="#">Tab 1</a></li>
					<li><a id="tab2" href="#">Tab 2</a></li>
				</ul>
			</div>
			<div id="tabcontent">
			Here is a simple demonstration of how AJAX Tabs work.
			</div>		
		</div>
	</body>
</html>
    HTML:
     
    seo_newbie_, Mar 7, 2010 IP
  2. seo_newbie_

    seo_newbie_ Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    here is a code in a nicer view:
    [​IMG]
     
    seo_newbie_, Mar 7, 2010 IP