[RESOLVED] Text is not changing dynamically

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

[RESOLVED] Text is not changing dynamically

timoed

This code is really simple and I just must be crazy, but I cannot seem to find why it won't work.

It would be greatly appreciated if someone could take a minute to look it over and let me know where I am going wrong.

I have used this before and it worked fine.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
</head>

<body>
<style>

#wrapper {
    margin: 0 auto;
    width:100%;
    font-size:14px;
}


#buttons {
	width:340px;
    float: left;
    height: 133px;
    margin: 10px 10px 0 0px;
    border-right: 1px solid #666;
}

#button1 a {
	outline: none;
	text-indent: -5000px;
	display:block;
	width:146px;
	height:105px;
	background-image:url(images/sprite_v2.png);
	background-position: -292px 0px;
	background-repeat:no-repeat;
	float:left;
	margin-right:20px;
}


#button2 a {
	outline: none;
	text-indent: -5000px;
	display:block;
	width:146px;
	height:105px;
	background-image:url(images/sprite_v2.png);
	background-repeat:no-repeat;
	background-position: -438px 0;
	float:left;
}

#content {
    font-family: Arial, Helvetica, sans-serif;
    float: left;
    display:block;
}

#footer {
	clear:both;
}

a {
	text-decoration:none;
}

ul {
    overflow:hidden;
    margin: 10px 0 0 8px;
    padding:0;
}

li{
  line-height:1.5em;
  display:inline;
}

.content1 {
	color:#953735;
}

.content2 {
	color:#604a7b;
}


</style>

<script>
$('button').bind('click', function() {
    $('div#content').html($('div#content' + ($(this).index()+1)).html());
});    </script>
<div id="wrapper">
	<div id="button">
    	<div id="button1">
        <a href="#" name="content1"></a></div>
        	<div id="button2">
            <a href="#" name="content2">Reporting Administrator</a>
</div>


</div>
    <div id="content">
		<div id="content1">
        	<ul>
        		<li><a href="http://hr.becweb.ibechtel.com/ldrc/bu_lms/Job%20Aids/Learning%20Admin/UQRG_LA_Record_Learning_Multiple.pdf">Record Learning &ndash; Multiple</a></li><br />
                <li><a href="#">Register Learners into a Scheduled Offering</a></li><br />
                <li><a href="#">Scheduled Offering Roster Report</a></li>
            </ul> 
        </div>
        <div id="content2" style="display:none;"> 
            <ul>
                <li><a href="#">Reporting Administrator Tutorial</a></li>
             </ul> 
        </div>   
  </div>

</body>
</html>

Thanks in advance!