zoukankan      html  css  js  c++  java
  • jquery练习5

    效果:

    代码:

    <style>
        ul,li,div{padding:0px;margin:0px;list-style:none;}
        #mycont{323px;height:height:104px;}
        #mytabnav{59px;float:left;}
        #mytabnav li{59px;height:26px;line-height:26px;}
        #mytabcont{260px;float:left;}
        #mytabcont div{display:none;}
        
        #mytabnav li a{
            display: block;
            text-decoration: none;
             57px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            color: #553F20;
            background-image: url(http://img.alimama.cn/cms/images/1328869531524.gif);
            border-right: 1px solid #C6D8E0;
            border-left: 1px solid #C6D8E0;
            border-top: 1px solid #C6D8E0;
            overflow: hidden;
        }
        #mytabnav li a:hover{
            color: #fff;
            background-color: #FF6600;
            background-image: url(http://img.alimama.cn/cms/images/1324263019208.jpg);
        }
        
        .select_hover{
            color: #fff;
            background-color: #FF6600;
            background-image: url(http://img.alimama.cn/cms/images/1324263019208.jpg);
        }
        
    </style>
    <div id="mycont">
        <div id="mytabnav">
            <li><a href="#">中年装</a></li>
            <li><a href="#">女装皮草</a></li>
            <li><a href="#">小西装</a></li>
            <li><a href="#">棉衣女</a></li>
        </div>
        <div id="mytabcont">
            <div style="display:block;"><a href="#"><img src="images/znz.jpg" /></a></div>
            <div><a href="#"><img src="images/nzpc.jpg" /></a></div>
            <div><a href="#"><img src="images/xxz.gif" /></a></div>
            <div><a href="#"><img src="images/myn.jpg" /></a></div>
        </div>
    </div>
    <script src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" >
        //自动变化样式
        $(document).ready(function(){
                $("#mytabnav li").mouseover(function(){
                    $(this).addClass("select_hover").siblings().removeClass("select_hover");
                    
                    var index=$(this).index();
                    $("#mytabcont div:eq("+index+")").show().siblings().hide();
                })
        })
        
    </script>
  • 相关阅读:
    JSP 中文乱码显示处理解决方案
    jsp的9大对象
    获取各种路径
    输出自绘制图片
    Emmet基本使用方法
    <input type="file" />浏览时只显示指定文件类型
    使用dockerfile文件创建image
    gunicorn 访问日志配置与项目启动
    制作符合自己需求的镜像 docker image
    linux 查看系统信息
  • 原文地址:https://www.cnblogs.com/yuwensong/p/2984502.html
Copyright © 2011-2022 走看看