• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html+css+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>列表选项卡</title>
    <style type="text/css">
    body{
    margin:0px;
    padding:0px;
    }
    #main{
    width:310px;
    border:1px solid #C8C8CC;
    margin-left:auto;
    margin-right:auto;
    margin-top:50px;
    }
    .main_title{
    width:310px;
    border-bottom:1px solid #C8C8CC;
    height:30px;
    }
    #main div .chang{
    border:1px solid #C8C8CC;
    float:left;
    width:153px;
    height:26px;
    text-align:center;
    padding-top:4px;
    cursor:pointer;
    }
    .main_head{
    width:310px;
    height:25px;
    background-color:#FFF4F8;
    }
    .main_head font{
    font-size:13px;
    color:#808080;
    margin-top:5px;
    }
    .main_content{
    width:310px;
    border-top:1px solid #808080;
    }
    .main_content ul{
    margin-left:-30px;
    margin-top:5px;
    width:290px;
    }
    .main_content ul li{
    list-style-type:none;
    font-size:13px;
    color:#2464B2;
    border-bottom:1px dotted #808080;
    line-height:27px;
    }
    .main_content ul li a{
    font-size:13px;
    color:#2464B2;
    text-decoration:none;
    }
    .main_content ul li a:hover{
    text-decoration:underline;
    }
    #main div ul.main_content_chang{
    width:290px;
    position:relative;
    z-index:100;
    top:0px;
    left:0px;
    display:block;
    }
    #main div ul{
    position:relative;
    display:none;
    }
    </style>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript">
    $(function(){
    $(".chang").each(function(index){
    $(this).click(function(){
    $(this).css("background-color","#E02D29");
    $(this).siblings("div").css("background-color","#fff");
    $("#main div ul").removeClass("main_content_chang");
    $(".main_content ul:eq("+index+")").show().siblings("ul").hide();
    })
    })
    })
    </script>
    </head>
    <body>
    <div id="main">
    <div class="main_title">
    <div class="chang" style="background:#E02D29">实时热点</div>
    <div class="chang" style="float:right;">七日关注</div>
    </div>
    <div class="main_content">
    <!-----------实时热点-------------->
    <ul class="main_content_chang">
    <li><img src="img/1_1.jpg"/> <a href="#">来自星星你的</a></li>
    <li><img src="img/1_2.jpg"/> <a href="#">私人定制的</a></li>
    <li><img src="img/3_1.jpg"/> <a href="#">全能星战的</a></li>
    <li><img src="img/1_4.jpg"/> <a href="#">加多宝陪千万的</a></li>
    <li><img src="img/1_5.jpg"/> <a href="#">女生厕所产子之后上课的</a></li>
    <li><img src="img/1_6.jpg"/> <a href="#">圆通夺命快递始末的</a></li>
    <li><img src="img/1_7.jpg"/> <a href="#">翻版张柏芝的</a></li>
    <li><img src="img/1_8.jpg"/> <a href="#">李彦鹏说谎的</a></li>
    <li><img src="img/1_9.jpg"/> <a href="#">1.7亿元存折的</a></li>
    <li><img src="img/1_10.jpg"/> <a href="#">90后为讨好男友溺死亲生女的</a></li>
    <li style="text-align:right; border-bottom-style:none"><a href="#" style="font-size:15px">查看完整榜单</a></li>
    </ul>
    <!-----------七日关注-------------------->
    <ul>
    <li><img src="img/1_1.jpg"/> <a href="#">南京出土神秘宝剑的</a></li>
    <li><img src="img/1_2.jpg"/> <a href="#">民政局假结婚证的</a></li>
    <li><img src="img/3_1.jpg"/> <a href="#">沃尔玛道歉的</a></li>
    <li><img src="img/1_4.jpg"/> <a href="#">买发卡的女孩的</a></li>
    <li><img src="img/1_5.jpg"/> <a href="#">假茅台骗两亿贷款的</a></li>
    <li><img src="img/1_6.jpg"/> <a href="#">男子收到亡妻圣诞大礼的</a></li>
    <li><img src="img/1_7.jpg"/> <a href="#">全球最美的100的</a></li>
    <li><img src="img/1_8.jpg"/> <a href="#">陨石八千万</a></li>
    <li><img src="img/1_9.jpg"/> <a href="#">安培参拜靖国神社</a></li>
    <li><img src="img/1_10.jpg"/> <a href="#">春晚舞台曝光</a></li>
    <li style="text-align:right; border-bottom-style:none"><a href="#" style="font-size:15px">查看完整榜单</a></li>
    </ul>
    </div>
    </div>
    </body>
    </html>

    结果展示:
    上一篇:html+css+javascript实现列表循环滚动示例代码
    下一篇:html让局部强制出现滚动条不破坏整体的样式和布局
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    html+css+jquery模仿搜索风云榜选项卡效果有截图 html+css+jquery,模仿,搜索,