jquery.mobile

HTML

<!DOCTYPE html>
<html>
    <head>
    <title>jQuery Mobile Tutorial on Codeforest.net</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>

<div data-role="page">
    <div data-role="header">
        <h1>9IComic</h1>
    </div>
    <div data-role="fieldcontain">
        <label for="search">Search Input:</label>
        <input type="search" name="password" id="search" value="" />
    </div>
    <div data-role="content">
    <div id="p1">
        <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">熱門漫畫</li>
            <li>
                <img src="http://www.6comic.com/pics/0/102.jpg"/>
                <a id="test" href="#">火影忍者</a>
                <h3></h3>
                <p>簡介</p>
                <span class="ui-li-count">14</span>
            </li>
            <li>Features
                <ul>
                    <li><a href="#">Red</a></li>
                    <li><a href="#">Red</a></li>
                    <li><a href="#">Red</a></li>
                </ul> 
            </li>
            <li><a href="#">Accessibility</a></li>
            <li><a href="#">Supported platforms</a></li>
        </ul>

    </div>

    <div data-role="footer">
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-icon="grid" data-iconpos="top">Summary</a></li>
                <li><a href="#" data-icon="star" data-iconpos="top">Favs</a></li>
                <li><a href="#" data-icon="gear" data-iconpos="top">Setup</a></li>
            </ul>
        </div>
    </div>
    <div data-role="pag" id="page2">
    </div>
</div>
</body>
</html>

JavaScript

$(document).ready(function() { 
            $('#test').unbind().click(function(){
                $('#p1').hide();
                $('#p2').show();
            });
     });