jQuery show / hide not working

Question

Tried to look at all the other questions about why this isn't working, no luck. I'm loading this in my header:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

Here is my script:

$(document).ready(function() {
    $("#knee-tab").hide();
    $("#shoulder-tab").hide();
});
$(function () {
    $("#patient-portal-link").click (function (event) {
        $("#patient-portal-tab").show();
        $("#knee-tab").hide();
        $("#shoulder-tab").hide();
    });
}); 
$(function () {
    $("#knee-link").click (function (event) {
        $("#patient-portal-tab").hide();
        $("#knee-tab").show();
        $("#shoulder-tab").hide();
        }); 
}); 
$(function () {
    $("#shoulder-link").click (function (event) {
        $("#patient-portal-tab").hide();
        $("#knee-tab").hide();
        $("#shoulder-tab").show();
    }); 
});

Here are the links that are meant to call up the script:

<ul>
<li><a id="#patient-portal-link">Patient Portal</a></li>
<li><a id="#knee-link">Knee</a></li>
<li><a id="#shoulder-link">Shoulder</a></li>
</ul>

And then I have the three divs which are named as follows:

<div id="patient-portal-tab">Patient portal content</div>
<div id="knee-tab">Knee content</div>
<div id="shoulder-tab">Shoulder content</div>

The knee and shoulder divs hide correctly on page load, but the links do nothing. I'm using Google Chrome and when inspecting element, I get no errors reported for javascript. What am I doing wrong?

Answer 1

Remove the # characters from your ID values. The # character in jQuery denotes an ID of an element, so you would need two #'s (##knee-tab) for this to work.

Answer 2

Are you sure you have the # symbol infront of the Ids. ReWrite it like this and it will work

<li><a id="patient-portal-link">Patient Portal</a></li>
<li><a id="knee-link">Knee</a></li>
<li><a id="shoulder-link">Shoulder</a></li>