Knockoutjs.com - Hello World Example

http://knockoutjs.com/examples/helloWorld.html

by Sherali Turdiyev

HTML

<nav id="menu">
    <ul>
        <li id="cats"><a href="#content1">Cats</a>
        </li>
        <li id="food"><a href="#content2">Food</a>
        </li>
        <li id="fashion"><a href="#content3">Fashion</a>
        </li>
        <li id="animals"><a href="#content4">Animals</a>
        </li>
    </ul>
</nav>
<div class="contents">
    <section id="content1">
        <p>
            <img src="http://lorempixel.com/600/400/cats/">
        </p>
        <p>Vivamus fringilla porttitor justo, ac varius neque tristique a. Duis iaculis augue a interdum pretium. Duis feugiat odio vel tortor tincidunt, in rhoncus lectus euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer volutpat id orci et scelerisque. Nulla semper felis a risus egestas scelerisque. Ut tempus aliquam orci, pretium dapibus risus dictum at. Pellentesque consectetur eget est eu pulvinar. Nulla facilisi. Vivamus eu viverra turpis, et dapibus enim.</p>
    </section>
    <section id="content2">
        <img src="http://lorempixel.com/600/400/food/">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales elit sit amet nibh ultrices cursus. Fusce eget dolor fermentum, pulvinar mi vel, consequat lectus. Curabitur maximus nibh nunc, eu porta nibh commodo id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eleifend, libero vitae venenatis vulputate, tortor magna cursus arcu, id viverra est ante ut est. Nulla placerat purus in fermentum lobortis. Integer sit amet dapibus orci.</p>
    </section>
    <section id="content3">
        <img src="http://lorempixel.com/600/400/fashion/">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales elit sit amet nibh ultrices cursus. Fusce eget dolor fermentum, pulvinar mi vel, consequat lectus. Curabitur maximus nibh nunc, eu porta nibh commodo id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per...

CSS

* {
    margin: 0 0;
    padding:0 0;
}
body {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    font-family: sans-serif;
    font-size: 14px;
}
nav {
    width: 100%;
    height: 40px;
    position: fixed;
    background-color: silver;
    color: #FFFFFF;
    text-align: center;
    font-size: medium;
    padding-top: 30px;
    padding-bottom: 10px;
}
#content1 {
    height: 500px;
    text-align: center;
    color: #000000;
    padding-top: 80px;
}
#content2 {
    height: 500px;
    text-align: center;
    color: #000000;
}
#content3 {
    height: 500px;
    text-align: center;
    color: #000000;
}
#content4 {
    height: 500px;
    text-align: center;
    color: #000000;
}
a {
    color: #ffffff;
    text-decoration: none;
}
a:visited {
    color:black;
}
a:hover {
    color: red;
}
img {
    padding: 30px;
    border-radius: 100%;
}
section {
    width: 1000px;
    padding-top: 30px;
    margin-left: 150px;
}
ul li {
    display:inline-block;
    list-style:none;
}

JavaScript

$(document).ready(function () {
    $('#menu li a').click(function () {
        var href = $(this).attr("href");
        $(href)
            .show(200)
            .siblings().hide('fast');
        return false;

    });
});