收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 958|回复: 2

[求助] js那一方米的

[复制链接]
发表于 2016-8-31 18:34:19 | 显示全部楼层 |阅读模式
忽略图片,想要实现,类似于二级菜单那样的效果
  1. <html>  
  2.         <head>
  3.                 <title></title>
  4.                 <meta charset="utf-8" />
  5.                 <style>
  6.                         #outer{
  7.                                 margin: 0px;
  8.                                 padding: 0px;
  9.                                 width: 360px;
  10.                         }
  11.                         #tab p{
  12.                                 float: right;
  13.                                 height: 36px;
  14.                                 line-height: 40px;
  15.                                 margin: 0px 10px 0px 0px;
  16.                                 font-size: 12px;
  17.                                 text-align: center;
  18.                                 color: #6E6E6E;
  19.                         }
  20.                         #tab p a{
  21.                                 color: #7A7A7A;
  22.                                 text-decoration: none;
  23.                         }
  24.                         #tab p a:hover,#outer section ul a:hover{color: #FF8400;text-decoration: underline;}
  25.                         #outer section{clear: both;margin-top: 20px;display:none;}
  26.                         #outer section div{float: left; margin-right: 25px;margin-top: 5px;}
  27.                         #outer section div p{
  28.                                 background-color: black;
  29.                                 margin: 0px;
  30.                                 height: 20px;
  31.                                 line-height: 20px;
  32.                                 text-align: center;
  33.                         }
  34.                         #outer section div p a{
  35.                                 font-size: 12px;
  36.                                 color: white;
  37.                                 text-decoration: none;
  38.                         }
  39.                         #outer section div p a:hover{color: #FF8400;}
  40.                         #outer section ul{
  41.                                 margin:0px;
  42.                                 list-style-type: square;
  43.                                 color: #FF8400;
  44.                                 font-size: 10px;
  45.                         }
  46.                         #outer section ul a{
  47.                                 font-size: 14px;
  48.                                 color: #122E67;
  49.                                 text-decoration: none;
  50.                                 line-height: 25px;
  51.                                 margin: 0px;
  52.                         }
  53.                         #outer section ul.u2{
  54.                                 margin-left: -25px;
  55.                         }
  56.                         #tab1{
  57.                                 margin-top: 10px;
  58.                                 width: 360px;
  59.                                 height: 36px;
  60.                                 border-left: 1px solid #DBDEE1;
  61.                         }
  62.                         #tab1 span a{
  63.                                 color: #596A7B;
  64.                                 text-decoration: none;
  65.                                 display: block;
  66.                                 float: left;
  67.                                 margin: 0px;
  68.                                 padding: 0px 15px;
  69.                                 height: 36px;
  70.                                 line-height: 36px;
  71.                                 background-color: #F7F7F7;
  72.                                 font-size: 14px;
  73.                                 text-align: center;
  74.                                 border-top: 1px solid #DBDEE1;
  75.                                 border-bottom: 1px solid #DBDEE1;
  76.                                 border-right: 1px solid #DBDEE1;
  77.                         }
  78.                         #tab1 span a.active1{
  79.                                 background-color: white;
  80.                                 border-bottom: 1px solid white;
  81.                         }
  82.                 </style>
  83.                 <script>
  84.                         /*请在指定位置写出相应的javascript程序代码*/
  85.                         (function(){
  86.                                 var test=document.getElementById("tab1");
  87.                                 var test2=document.getElementById("outer");
  88.                                 var a=test.getElementsByTagName("a")[0];
  89.                                 var section=test2.getElementsByTagName("section")[0];
  90.                                
  91.                                 a.onmouseover=function(){
  92.                                         this.className="active1";
  93.                                 }
  94.                                 section.onmouseover=function(){
  95.                                         this.style.display="block"
  96.                                 }
  97.                                 a.onmouseout=function(){
  98.                                         this.className="";
  99.                                 }
  100.                                 section.onmouseout=function(){
  101.                                         this.style.display="none"
  102.                                 }
  103.                         })();
  104.                 </script>
  105.         </head>
  106.         <body >
  107.                 <div id="outer">
  108.                         <div id="tab1">
  109.                                 <span><a href="#"class="active1" >游戏</a></span>
  110.                                 <span><a href="#">新网游</a></span>
  111.                                 <span><a href="#">新手卡</a></span>
  112.                                 <span><a href="#">有奖活动</a></span>
  113.                                 <span><a href="#">手游</a></span>
  114.                         </div>
  115.                         <section style="display: block;">
  116.                                 <div ><img src="img/U3.jpg"/><p><a href="#">新疆美女沉迷LOL</a></p></div>
  117.                                 <ul>
  118.                                         <li><a href="#">E3大展:莎木3最终幻想7震撼公布</a></li>
  119.                                         <li><a href="#">射击独占大作 战争机器4宣传视频</a></li>
  120.                                         <li><a href="#">逆天收入 部落战争每天收入960万</a></li>
  121.                                         <li><a href="#">半数魔兽玩家认为6.2新套装难看</a></li>
  122.                                 </ul>
  123.                         </section >
  124.                         <section >
  125.                                 <div ><img src="img/U4.jpg"/><p><a href="#">上周首爆新游回顾</a></p></div>
  126.                                 <ul>
  127.                                         <li><a href="#">微软公布模拟现实网游 《ION》</a></li>
  128.                                         <li><a href="#">螺旋猫性感COS英雄联盟女英雄</a></li>
  129.                                         <li><a href="#">古剑奇谭网络版咒隐视频首曝光</a></li>
  130.                                         <li><a href="#">《全职大师》首测精彩视频集锦</a></li>
  131.                                 </ul>
  132.                         </section>
  133.                         <section>
  134.                                 <div ><img src="img/U5.jpg"/><p><a href="#">《天谕》时装礼包</a></p></div>
  135.                                 <ul>
  136.                                         <li><a href="#">《魔域》 奇想童乐新手箱 专区</a></li>
  137.                                         <li><a href="#">《问道》 决战昆仑至尊礼包 专区</a></li>
  138.                                         <li><a href="#">《不打不相识》豪华礼包 专区</a></li>
  139.                                         <li><a href="#">《奇迹MU》新浪独家礼包 专区</a></li>
  140.                                 </ul>
  141.                         </section>
  142.                         <section>
  143.                                 <div ><img src="img/U6.jpg"/><p><a href="#">玩天谕赢苹果手表</a></p></div>
  144.                                 <ul>
  145.                                         <li><a href="#">不打不相识红包季 升级领取红包</a></li>
  146.                                         <li><a href="#">《魔域》公测开启 玩游戏送红包</a></li>
  147.                                         <li><a href="#">玩《奇迹MU》S9版本赢丰厚奖品</a></li>
  148.                                         <li><a href="#">风暴英雄公测 发微博赢苹果手表</a></li>
  149.                                 </ul>
  150.                         </section>
  151.                         <section>
  152.                                 <div ><img src="img/U7.jpg"/><p><a href="#">勇者斗恶龙手游</a></p></div>
  153.                                 <ul>
  154.                                         <li><a href="#">火柴人联盟:LOL题材横版动作游戏</a></li>
  155.                                         <li><a href="#">Ben Brode:炉石传说烂牌亦将有用</a></li>
  156.                                         <li><a href="#">《辐射:避难所》免费登陆iOS平台</a></li>
  157.                                         <li><a href="#">《火炬之光》手游年内上架双平台</a></li>
  158.                                 </ul>
  159.                         </section>
  160.                 </div>
  161.         </body>
  162. </html>  
复制代码
发表于 2016-9-1 16:26:13 | 显示全部楼层
#tab下的a有好多的,你只用第一个???
回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-8-31 18:39:31 | 显示全部楼层

RE: js那一方面的

这是一个代码填空,只能写js,求大神。不知道为啥哪个var a=test.getElementsByTagName("a")[0];为null
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-10-23 00:29 , Processed in 0.109099 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表