滑动菜单(实例)

原创 2015年11月19日 09:43:30
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="style.js"/>
    <style type="text/css">
        /* CSS样式制作 */


    </style>
    <script type="text/javascript">

        // JS实现选项卡切换


    </script>

</head>
<body>
<!-- HTML页面布局 -->
<div id="tab-list">
    <ul id="ul1">
        <li class="active">房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
    <div>
        <ul>
            <li><a href="#">175万购昌平邻铁三居 总价20万买一居</a></li>
            <li><a href="#">200万内购五环三居 140万安家东三环</a></li>
            <li><a href="#">北京首现零首付楼盘 53万购东5环50平</a></li>
            <li><a href="#">京楼盘直降5000 中信府 公园楼王现房</a></li>
        </ul>
    </div>
    <div  class="hidden">
        <ul>
            <li><a href="#">275万购昌平邻铁三居 总价20万买一居</a></li>
            <li><a href="#">200万内购五环三居 140万安家东三环</a></li>
            <li><a href="#">北京首现零首付楼盘 53万购东5环50平</a></li>
            <li><a href="#">京楼盘直降5000 中信府 公园楼王现房</a></li>
        </ul>
    </div>
    <div  class="hidden">
        <ul >
            <li><a href="#">375万购昌平邻铁三居 总价20万买一居</a></li>
            <li><a href="#">200万内购五环三居 140万安家东三环</a></li>
            <li><a href="#">北京首现零首付楼盘 53万购东5环50平</a></li>
            <li><a href="#">京楼盘直降5000 中信府 公园楼王现房</a></li>
        </ul>
    </div>
</div>
</body>
</html>


*{margin: 0;padding: 0;font-size: 14px;}
a{
    text-decoration: none;
}
ul{
    list-style-type: none;
}
#tab-list{
    width: 275px;height:190px;margin: 20px auto;
    }

.hidden{
    display: none;
}
.show{display: block;}

#ul1{border-bottom: 2px solid #8B4513;height: 32px;}
#ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}
#ul1 li:hover{cursor: pointer;}
#ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}

#tab-list div{border: 1px solid #7396B8;border-top: none;}
#tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}

/**
 * Created by adminsjm on 2015/11/18.
 */
window.onload=function(){
    var li=document.getElementById("ul1").getElementsByTagName("li");
    var div=document.getElementById("tab-list").getElementsByTagName("div");
    for(var i=0;i<li.length;i++){
        li[i].index=i;
        li[i].onmousemove= function () {
            for(var j=0;j<li.length;j++){
                li[j].className="";
            }
            this.className="active";
            for(var j=0;j<li.length;j++){
                div[j].className="hidden";
            }
            div[this.index].className="show";
        }
    }
}


版权声明:如果文中有任何问题或者值得讨论的地方,都可以在下方留言或者QQ526664687,欢迎交流!!!

Android底部/顶部滑动菜单,方便调用的工具类

大家都不用AlertDialog了,发现自己的应用还是AlertDialog,就想弄个打开底部/顶部菜单的工具类方法,这样调用起来比较方便! public class AndUtil { /*...
  • xyzdwf
  • xyzdwf
  • 2017年01月07日 19:32
  • 674

滑动菜单SlidingMenu实例

设计原理在你的UI布局有限的情况下,放不下太多的控件的时候,可以考虑用这个滑动式菜单。 效果图:          效果1     效果2    HorzScrollWithImag...
  • u011574305
  • u011574305
  • 2015年01月03日 22:43
  • 440

弹性滑动导航菜单:

实例:jQuery弹性滑动导航菜单 body{ font-size:100%; font-family:"Microsoft YaHei","Arial"; background:#fff;...
  • cometwo
  • cometwo
  • 2015年12月22日 13:17
  • 1570

cocos2D中实现滑动菜单CCScrollView+CCMenu效果,(注意不是cocos2D-x)!!

本来想着用ScrollView+Menu可以很容易实现类似Angry Bird,滑动菜单选择关卡的效果。结果悲剧了,cocos2D没有CCScrollView,没办法自己实现了一个。 成员变量: 1 ...
  • xuzhaojia
  • xuzhaojia
  • 2013年11月10日 15:18
  • 1472

横向滑动菜单

android:layout_width="match_parent"         android:layout_height="50dp"         android:orientati...
  • canren96
  • canren96
  • 2016年06月27日 08:35
  • 177

Android 自定义横向滑动菜单的实现

Android 自定义横向滑动菜单的实现
  • aa6227716
  • aa6227716
  • 2015年05月21日 16:32
  • 2968

JS实现侧部菜单栏的滑动

最近的网站越来越流行侧部菜单栏,所以今天自己实现了一下: //背景图片 //这张图片点击后调用菜单栏scrol...
  • hjkle987
  • hjkle987
  • 2015年09月14日 10:28
  • 1365

Android上下菜单双向滑动实现

import android.content.Context; import android.os.AsyncTask; import android.util.AttributeSet; impor...
  • hahashui123
  • hahashui123
  • 2014年07月09日 16:29
  • 2082

Android双向滑动菜单完全解析,教你如何一分钟实现双向滑动特效

记得在很早之前,我写了一篇关于Android滑动菜单的文章,其中有一个朋友在评论中留言,希望我可以帮他将这个滑动菜单改成双向滑动的方式。当时也没想花太多时间,简单修改了一下就发给了他,结果没想到后来却...
  • sinyu890807
  • sinyu890807
  • 2013年08月30日 08:32
  • 56363

android 使用Scroller实现美团悬浮框,网易左右滑动菜单效果

android 使用Scroller实现美团悬浮框,网易左右滑动菜单效果
  • coderinchina
  • coderinchina
  • 2016年06月12日 15:55
  • 1751
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:滑动菜单(实例)
举报原因:
原因补充:

(最多只允许输入30个字)