zoukankan      html  css  js  c++  java
  • jquery 左侧展开栏目

    <!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>my_news</title>
    <style>
    *{padding:0;list-style:none;margin:0;}
    body{background:#666;}
    .linBox{margin-top:10px;margin-left:10px;70px;}
    .linBox ul li a{color:#fff; font-size:12px; text-decoration:none;background:#333;padding:8px;margin:4px;float:left;border:1px solid #fff;position:relative; 100px;}
    .linBox ul li .linBoxList{background:#ccc; height:330px;300px;position:absolute; left:118px;border:1px solid #fff; font-size:12px;color:#000;padding:10px;display:none;top:14px;z-index:1;}
    </style>
    <script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
    <script>
    $(document).ready(function(){
        $(".linBox ul li").hover(function(){
            $(this).find(".linBoxList").show();
        },
        function(){
            $(this).find(".linBoxList").hide();
        });
    });
    </script>
    </head>
    <body>
    <div class="linBox">
        <ul>
            <li>
                <a href="">xxxxxxxxxx</a>
                <div class="linBoxList">
                <a href="">mmmmmm</a> <a href="">mmmmmm</a> <a href="">mmmmmm</a>
                </div>
            </li>

            <li>
                <a href="">yyyyyyyyyyy</a>
                <div class="linBoxList">
                <a href="">yyyyyyyyyy</a>
                </div>
            </li>

            <li>
                <a href="">zzzzzzzzzz</a>
                <div class="linBoxList">
                <a href="">zzzzzzzzz</a>
                </div>
            </li>

            <li>
                <a href="">xxxxxxxxxx</a>
                <div class="linBoxList">
                <a href="">1111111111111</a>
                </div>
            </li>

            <li>
                <a href="">xxxxxxxxxx</a>
                <div class="linBoxList">
                <a href="">1111111111111</a>
                </div>
            </li>
        </ul>
    </div>
    </body>
    </html>

  • 相关阅读:
    TYVJ P1092 麻将
    BZOJ 1020——[SHOI2008]安全的航线flight
    JSOI2008 火星人prefix
    Silverlight下“DataGrid”和“Pdf”导出
    Jquery实现“Iframe”页面切换
    遍历表,执行存储过程的方法
    “JS”和“Aspx”之注册“JS脚本”、刷新页面、TreeNode下JS连接设置
    WeatherWebService
    WCF方法“异步调用”的“同步问题”
    “Silverlight”中获取“HTML元素和参数”及JS交互
  • 原文地址:https://www.cnblogs.com/lin3615/p/3590777.html
Copyright © 2011-2022 走看看