zoukankan      html  css  js  c++  java
  • js实例4下拉菜单

    <style type="text/css">
    *{ margin:0px auto; padding:0px}
    #fenlei{ 500px; height:35px;}
    .xiang{ float:left; 100px; height:35px; text-align:center; line-height:35px; vertical-align:middle;}
    .xiang:hover{ cursor:pointer}
    .xuanxiang{ 500px; height:300px; display:none}
    #guonei{ background-color:#63C; display:block}
    #guoji{ background-color:#3C9}
    #tiyu{ background-color:#C36}
    #yule{ background-color:#FF6}
    </style>
    </head>

    <body>

    <br />
    <div id="fenlei">
    <div class="xiang" style="background-color:#63C" onclick="showa('guonei')">国内新闻</div>
    <div class="xiang" style="background-color:#3C9" onclick="showa('guoji')">国际新闻</div>
    <div class="xiang" style="background-color:#C36" onclick="showa('tiyu')">体育新闻</div>
    <div class="xiang" style="background-color:#FF6" onclick="showa('yule')">娱乐新闻</div>
    </div>

    <div id="guonei" class="xuanxiang">

    </div>

    <div id="guoji" class="xuanxiang">

    </div>

    <div id="tiyu" class="xuanxiang">

    </div>

    <div id="yule" class="xuanxiang">

    </div>


    <script type="text/javascript">

    function showa(d)
    {
    var div = document.getElementById(d);

    var suoyou = document.getElementsByClassName("xuanxiang");
    for(var i=0;i<suoyou.length;i++)
    {
    suoyou[i].style.display = "none";
    }

    div.style.display = "block";

    }

    </script>

    <style type="text/css">
    *{ margin:0px auto; padding:0px}
    #fenlei{ 500px; height:35px;}
    .xiang{ float:left; 100px; height:35px; text-align:center; line-height:35px; vertical-align:middle;}
    .xiang:hover{ cursor:pointer}
    .xuanxiang{ 500px; height:300px; display:none}
    #guonei{ background-color:#63C; display:block}
    #guoji{ background-color:#3C9}
    #tiyu{ background-color:#C36}
    #yule{ background-color:#FF6}
    </style>
    </head>

    <body>

    <br />
    <div id="fenlei">
    <div class="xiang" style="background-color:#63C" onclick="showa('guonei')">国内新闻</div>
    <div class="xiang" style="background-color:#3C9" onclick="showa('guoji')">国际新闻</div>
    <div class="xiang" style="background-color:#C36" onclick="showa('tiyu')">体育新闻</div>
    <div class="xiang" style="background-color:#FF6" onclick="showa('yule')">娱乐新闻</div>
    </div>

    <div id="guonei" class="xuanxiang">

    </div>

    <div id="guoji" class="xuanxiang">

    </div>

    <div id="tiyu" class="xuanxiang">

    </div>

    <div id="yule" class="xuanxiang">

    </div>


    <script type="text/javascript">

    function showa(d)
    {
    var div = document.getElementById(d);

    var suoyou = document.getElementsByClassName("xuanxiang");
    for(var i=0;i<suoyou.length;i++)
    {
    suoyou[i].style.display = "none";
    }

    div.style.display = "block";

    }

    </script>

  • 相关阅读:
    byte在计算机中的存储方式--Double.byteValue()的输出结果思考
    启动Eclipse时An internal error occurred during: "Initializing Java Tooling".错误
    java实现两个int数交换
    cmd编译运行java
    java配置环境变量
    使用jQuery获取session中存储的list集合
    搭建ssm框架,可实现登录和数据展示以及增删改查
    java 生成UUID
    jQuery serialize()方法获取不到数据,alert结果为空
    SpringMVC架构的项目,js,css等静态文件导入有问题
  • 原文地址:https://www.cnblogs.com/qdlj/p/6188309.html
Copyright © 2011-2022 走看看