xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > js实现仿爱微网两级导航菜单效果代码,js实现黑

js实现仿爱微网两级导航菜单效果代码,js实现黑

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-07-16 09:37

jQuery选择器使得获得页面元素变得更加容易、更加灵活,从而大大减轻了开发人员的压力。如同盖楼一样,没有砖瓦,就盖不起楼房,得不到元素谈何其他各种操作呢?可见,jQuery选择器的重要性。

本文实例讲述了js实现黑色简易的滑动门网页tab选项卡效果。分享给大家供大家参考。具体如下:

本文实例讲述了js实现仿爱微网两级导航菜单效果代码。分享给大家供大家参考。具体如下:

jquery选择器大方向可以分为这样:

这是一款js实现的黑色风格网页滑动门菜单,虽然简洁但看上去不失大气,稍微修改一下即可换成选项卡,懂JS的朋友可好好修改一下哦,改成你喜欢的样式。

这是一款仿爱微网两级导航菜单,tab选项卡形式的导航菜单,原生js做的tab选项卡型的导航菜单,需要鼠标点击才切换出二级子菜单,可修改成鼠标移过去就更换内容的形式。

图片 1

运行效果截图如下:

运行效果截图如下:

下面我们先来看看基本选择器总的CSS选择器:

图片 2

图片 3

图片 4

在线演示地址如下:

在线演示地址如下:

1.标签选择器:

$("element")

具体代码如下:

具体代码如下:

其中,参数element,表示待查找的HTML标记名,如$("div"),标签选择器获取元素的方式是高效的,因为它继承自javascript中的getEmelentsByTagName,它获取的是整个元素的集合。

<!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> 
body,ul,li{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
#outer{width:450px;margin:10px auto;}
#tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}
#tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;}
#tab li.current{color:#000;background:#ccc;}
#content{border:1px solid #000;border-top-width:0;}
#content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;}
</style>
<script> 
window.onload = function ()
{
 var oLi = document.getElementById("tab").getElementsByTagName("li");
 var oUl = document.getElementById("content").getElementsByTagName("ul");
 for(var i = 0; i < oLi.length; i  )
 {
  oLi[i].index = i;
  oLi[i].onmouseover = function ()
  {
   for(var n = 0; n < oLi.length; n  ) oLi[n].className="";
   this.className = "current";
   for(var n = 0; n < oUl.length; n  ) oUl[n].style.display = "none";
   oUl[this.index].style.display = "block"
  } 
 }
}
</script>
</head>
<body>
<div id="outer">
 <ul id="tab">
 <li class="current">第一课</li>
 <li>第二课</li>
 <li>第三课</li>
 </ul>
 <div id="content">
 <ul style="display:block;">
  <li>网页特效原理分析</li>
  <li>响应用户操作</li>
  <li>提示框效果</li>
  <li>事件驱动</li>
  <li>元素属性操作</li>
  <li>动手编写第一个JS特效</li>
  <li>引入函数</li>
  <li>网页换肤效果</li>
  <li>展开/收缩播放列表效果</li>
 </ul>
 <ul>
  <li>改变网页背景颜色</li>
  <li>函数传参</li>
  <li>高重用性函数的编写</li>
  <li>126邮箱全选效果</li>
  <li>循环及遍历操作</li>
  <li>调试器的简单使用</li>
  <li>典型循环的构成</li>
  <li>for循环配合if判断</li>
  <li>className的使用</li>
  <li>innerHTML的使用</li>
  <li>戛纳印象效果</li>
  <li>数组</li>
  <li>字符串连接</li>
 </ul>
 <ul>
  <li>JavaScript组成:ECMAScript、DOM、BOM,JavaScript兼容性来源</li>
  <li>JavaScript出现的位置、优缺点</li>
  <li>变量、类型、typeof、数据类型转换、变量作用域</li>
  <li>闭包:什么是闭包、简单应用、闭包缺点</li>
  <li>运算符:算术、赋值、关系、逻辑、其他运算符</li>
  <li>程序流程控制:判断、循环、跳出</li>
  <li>命名规范:命名规范及必要性、匈牙利命名法</li>
  <li>函数详解:函数构成、调用、事件、传参数、可变参、返回值</li>
  <li>定时器的使用:setInterval、setTimeout</li>
  <li>定时器应用:站长站导航效果</li>
  <li>定时器应用:自动播放的选项卡</li>
  <li>定时器应用:数码时钟</li>
  <li>程序调试方法</li>
 </ul>
 </div>
</div>
</body>
</html>
<html>
<head>
<title>一个两级的网页菜单</title>
<style>
*{margin:0;padding:0;}
.subnav {
 background-color: #3188DA;
 color: #C0DEF9;
 height: 20px;
}
.subnav a {
 color: #FFFFFF;
 margin-bottom: 0;
 margin-left: 5px;
 margin-right: 5px;
 margin-top: 0;
}
.subnav a.cur {
 color: #FAEC04;
}
.aa {
 background-image: url("images/ui1.png");
 background-origin: padding-box;
 background-position: left -92px;
 background-repeat: no-repeat;
}
.bb {
 background-color: #75BAFB;
 background-image: url("images/ui1.png");
 background-position: left -183px;
 background-repeat: no-repeat;
}
.cc{color:#ffffff;}
.dd{color:#000}
ul,li{list-style-type:none}
#navbox {
 margin-bottom: 15px;
 position: relative;
 width:960px;
}
.mainnav {
 border-bottom-color: #3188DA;
 border-bottom-style: solid;
 border-bottom-width: 5px;
 height: 31px;
}
.mainnav li {
 color: #FFFFFF;
 float: left;
 font-size: 14px;
 font-weight: bold;
 line-height: 31px;
 margin-right: 5px;
 text-align: center;
 width: 90px;
}
.mainnav li a {
 display: block;
 font-weight: normal;
 height: 31px;
}
.uhide{display:none;}
.ushow{display:block;}
</style>
</head>
<body>
<div id="navbox">
<ul class="mainnav">
 <li class='bb' onclick='qh(0);' id='ta_0'><a href="#" class='cc' id='a0'>首页</a></li>
 <li class='aa' onclick='qh(1);' id='ta_1'><a href="#" class='dd' id='a1'>PHP教程</a></li>
 <li class='aa' onclick='qh(2);' id='ta_2'><a href="#" class='dd' id='a2'>网页前端</a></li>
 <li class='aa' onclick='qh(3);' id='ta_3'><a href="#" class='dd' id='a3'>网页特效</a></li>
 <li class='aa' onclick='qh(4);' id='ta_4'><a href="#" class='dd' id='a4'>脚本下载</a></li>
</ul>
<div style="padding-left:20px;" class="uhide" id='tab_0'>
</div>
<div style="padding-left:20px;" class="subnav uhide" id='tab_1'>
<a >PHP基础</a> | 
<a href="#">mysql教程</a> | 
<a href="#">smarty教程</a> |
<a href="#">PHP框架</a> | 
<a href="#">PHP开源</a> | 
<a href="#">Linux教程</a> 
</div>
<div style="padding-left:20px;" class="subnav uhide" id='tab_2'>
<a >DIV CSS布局</a> | 
<a href="#">javascript教程</a> | 
<a href="#">jquery教程</a> |
<a href="#">ajax教程</a> | 
<a href="#">flash开源</a> | 
<a href="#">photoshop教程</a> 
</div>
<div style="padding-left:20px;" class="subnav uhide" id='tab_3'>
<a >js导航菜单</a> | 
<a href="#">js表单特效</a> | 
<a >js幻灯片</a> |
<a href="#">js文本特效</a> | 
<a href="#">js弹出层</a> | 
<a href="#">js网页特效</a> 
</div>
<div style="padding-left:20px;" class="uhide" id='tab_4'>
</div>
</div>
<script>
function g(o){return document.getElementById(o);}
function qh(n){
 for(var i=0;i<=6;i  ){
  g('ta_' i).className='aa';
  g('ta_' n).className='bb';
  g('a' i).className='dd';
  g('a' n).className='cc';
  g('tab_' i).className='uhide subnav';
  g('tab_' n).className='ushow subnav';
  g('tab_0').className='uhide';
  g('tab_0').className='uhide';
  g('tab_4').className='uhide';
  g('tab_4').className='uhide';
 }
}
</script>
</body>
</html>

2.ID选择器

希望本文所述对大家的javascript程序设计有所帮助。

希望本文所述对大家的javascript程序设计有所帮助。

$("id")

您可能感兴趣的文章:

  • JavaScript版TAB选项卡效果实例
  • 原生javascript实现Tab选项卡切换功能
  • js简单实现竖向tab选项卡的方法
  • jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
  • js实现类似菜单风格的TAB选项卡效果代码
  • js基于面向对象实现网页TAB选项卡菜单效果代码
  • JavaScript tab选项卡插件实例代码

您可能感兴趣的文章:

  • JS实现带圆弧背景渐变效果的导航菜单代码
  • JS CSS实现简单的二级下拉导航菜单效果
  • JS实现黑色大气的二级导航菜单效果
  • JS实现带有抽屉效果的产品类网站多级导航菜单代码
  • JS CSS实现大气的黑色首页导航菜单效果代码
  • js实现的动画导航菜单效果代码
  • JS实现自动变化的导航菜单效果代码
  • 基于dropdown.js实现的两款美观大气的二级导航菜单
  • JS实现的简洁二级导航菜单雏形效果

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:js实现仿爱微网两级导航菜单效果代码,js实现黑

关键词: mg娱乐电子游戏