integrate JsQuery

integrate JsQuery

Hi, im trying to integrate a jsquery plugin (listnav) to my very first page.
i dont really know how to do anything so far. i just tried to solve it through following the instructions on the jQuery How to, and several other w3schools sites about jQuery.

Hope you can help me.

i added my code that ive been working out so far.

kind regards

  1. <!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>Know what youre talking about</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
    window.onload = function() {
    alert( "welcome" );
    };
    $(listnav).ready(function(){
        $("p").click(function(){
            $(this).hide();
        });
    });

    $('#myList').listnav();
    </script>
    </head>

    <style>
    #listnav {
    .listNav { margin:0 0 10px; }
    .ln-letters { overflow:hidden; }
    .ln-letters a { font-size:0.9em; display:block; float:left; padding:2px 6px; border:1px solid silver; border-right:none; text-decoration:none; }
    .ln-letters a.ln-last { border-right:1px solid silver; }
    .ln-letters a:hover,
    .ln-letters a.ln-selected { background-color:#eaeaea; }
    .ln-letters a.ln-disabled { color:#ccc; }
    .ln-letter-count { text-align:center; font-size:0.8em; line-height:1; margin-bottom:3px; color:#336699;
    }
    #header {
        background-color:white;
        color:#333;
        text-align:left;
        padding:0px;
        margin-top: 100px;
        margin-bottom: 100px;
        margin-right: 150px;
        margin-left: 112px;
        font-family: Arial, Helvetica, sans-serif;
    }
    em {
        font-style: normal;
        font-size: 80%;
        text-transform: none;
        color: #666;
        font-weight: 440;
        font-variant: small-caps;
    }
    #nav {
        line-height:30px;
        background-color:#eeeeee;
        height:300px;
        width:100px;
        float:left;
        padding:5px;         
    }
    #myList {
        width:541px;
        float:left;
        padding:10px;          
    }
    #footer {
        background-color:black;
        color:white;
        clear:both;
        text-align:center;
       padding:5px;          
    }

    </style>
    <body>

    <div id="header">
    <h1><em>medi</em>Lat</h1>
    </div>

    <div id="nav">
    London List<br>
    Nothing yet<br>
    Nothing yet2<br>
    </div>

    <div id="myList">
    <h2>London</h2>
    <p>
    London Scenes 1
    </p>
    <p>
    London Scenes 2
    </p>
  2. <p>
  3. London Scenes3
  4. </p>
    </div>

    <div id="footer">
    Copyright © W3Schools.com
    </div>
    <body>
    </body>
    </html>