Js binds the corresponding div code block through the bind method

Click div to switch the display style

Click on the video to appear

these two pieces of div are bound through the bind method, and the related code

< html xmlns= " http://www.w3.org/1999/xhtml&.;>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font: 12px/19px Arial, Helvetica, sans-serif;
            color: -sharp666;
        }

        .tab {
            width: 240px;
            margin: 50px;
        }

        .tab_menu {
            clear: both;
        }

        .tab_menu li {
            float: left;
            text-align: center;
            cursor: pointer;
            list-style: none;
            padding: 1px 6px;
            margin-right: 4px;
            background: -sharpF1F1F1;
            border: 1px solid -sharp898989;
            border-bottom: none;
        }

        .tab_menu li.hover {
            background: -sharpDFDFDF;
        }

        .tab_menu li.selected {
            color: -sharpFFF;
            background: -sharp6D84B4;
        }

        .tab_box {
            clear: both;
            border: 1px solid -sharp898989;
            height: 100px;
        }

        .hide {
            display: none
        }
    </style>
    <!--   jQuery -->
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        //<![CDATA[
        $(function() {
            var $div_li = $("div.tab_menu ul li");
            $div_li.click(function() {
                $(this).addClass("selected") //<li>
                    .siblings().removeClass("selected"); //<li>
                var index = $div_li.index(this); // <li>  li
                $("div.tab_box > div") //div 
                    .eq(index).show() // <li><div>
                    .siblings().hide(); //<div>
            }).hover(function() {
                $(this).addClass("hover");
            }, function() {
                $(this).removeClass("hover");
            })
        })
        //]]>
    </script>
</head>
<body>

    <div class="tab">
        <div class="tab_menu">
            <ul>
                <li class="selected"></li>
                <li></li>

            </ul>
        </div>
        <!--bind  -->
        <div> </div>
        <!-- end-->

        <!--ajax,-->
        <div class="tab_box">
            <div></div>
            <div class="hide"></div>

        </div>
    </div>

</body>

< / html >

how should I write it