一个鼠标滑动选项卡函数

最新推荐文章于 2022-10-21 16:02:47 发布

engzs

最新推荐文章于 2022-10-21 16:02:47 发布

阅读量726

点赞数

文章标签： function html div xhtml javascript url

本文链接：https://blog.csdn.net/engzs/article/details/1500376

版权

自己的一个鼠标滑动选项卡函数,可用这个网址预览 http://www.5dworld.net/js/jsoption.html

<!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=gb2312" />
<title>鼠标滑动选项卡</title>
<style type="text/css">
/*清楚列表默认样式*/
#mmoption{margin:0; padding:0; list-style-type:none}
/*让列表横排*/
#mmoption li{float:left;}
/*选中项的样式*/
.mmoptionA
{
  background:url(campus3_e01.gif) no-repeat center;
  width:84px;height:16px;
  text-align:center;
  color:#408C3F;font-weight:600;font-size:12px;
  padding-top:5px;
  cursor:pointer
}
/*未选中项的样式*/
.mmoptionB
{
  background:url(campus3_e02.gif) no-repeat center;
  width:82px;height:16px;
  text-align:center;
  color:#FFFFFF;font-weight:600;font-size:12px;
  padding-top:5px;
  cursor:pointer
}
/*内容层样式*/
#showId0,#showId1,#showId2,#showId3,#showId4
{
  display:none;clear:left;
  width:408px;height:100px;
  padding-top:50px;
  border-left:solid 1px #408C3F;border-right:solid 1px #408C3F;border-bottom:solid 1px #408C3F;
  text-align:center;
  margin-left:1px
}
/*#showId0{display:block;}*/
</style>
<script language="javascript">
/********************选项卡函数参数说明*****************************/
optionId:选项条ID
htmlType:html类别,TD 或 LI ,表格制作为TD,列表制作为LI
cssType:样式名称,样式表中应有两个相关样式,
   一为选中状态样,一为未选中状态样式,用同一名称加A和B表示,写入这个参数时去掉后面的A或B
showId:显示相关内容的ID名称,参数不显示数字序号,实际HTML中每个ID以数字结尾并以0开始
number:初始被选中的项,一般为0(从0开始)
myevent:事件类型,鼠标经过为"onmouseover",单击为"onclick"
/*******************************************************************/
function MmOption(optionId,htmlType,cssType,showId,number,myevent)
{
  document.getElementById(showId+number).style.display="block";
  var mmArray=document.getElementById(optionId).getElementsByTagName(htmlType);
  for(var i=0;i<mmArray.length;i++)
  {
   mmArray[i].className=(i==number?cssType+"A":cssType+"B");
   mmArray[i][myevent]=function()
   {
    for(var j=0;j<mmArray.length;j++)
    {
     if(this!=mmArray[j])
     {
      mmArray[j].className=cssType+"B";
      document.getElementById(showId+j).style.display="none";
     }
     else
     {
      mmArray[j].className=cssType+"A";
      document.getElementById(showId+j).style.display="block";
     }
    }
   }
  }
}
window.οnlοad=function()
{
  MmOption("mmoption","li","mmoption","showId",3,"onmouseover");
}
</script>
</head>
<body>
<ul id="mmoption">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
</ul>
<div id="showId0">选项1</div>
<div id="showId1">选项2</div>
<div id="showId2">选项3</div>
<div id="showId3">选项4</div>
<div id="showId4">选项5</div>
</body>
</html>

engzs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个鼠标滑动选项卡函数

自己的一个鼠标滑动选项卡函数,可用这个网址预览http://www.5dworld.net/js/jsoption.htmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">鼠标滑动选项卡 /*清楚列表默认样式*/ #mmoption{margin:0; padding:0
复制链接

扫一扫