首页常用代码正文

js鼠标滑过导航菜单出现相应的内容

admin2022-06-21

如下图:js实现:当鼠标经过网站设计出现网站设计相关内容,当鼠标经过平面出现平面的内容

832242-20151104232838617-1358502322.jpg

html代码:

<div id="header">
  <ul>
    <li onmouseover="gaibian(1)">
      <h1>网站设计开发</h1>
    </li>
    <li onmouseover="gaibian(2)">
      <h1>平面商业设计</h1>
    </li>
    <li onmouseover="gaibian(3)">
      <h1>室内装饰设计</h1>
    </li>
  </ul>
</div>
<div id="content">
  <ul id="tb1" style="display:block">
    <li>9月8日网页全科班开课计划!</li>
    <li>9月8日网页全科班开课计划!</li>
    <li>9月8日网页全科班开课计划!</li>
  </ul>

  <ul id="tb2" style="display:none">
    <li>9月9日平面高级班开课计划!</li>
    <li>9月9日平面高级班开课计划!</li>
    <li>9月9日平面高级班开课计划!</li>
  </ul>

  <ul id="tb3" style="display:none">
    <li>9月10日室内基础班开课计划!</li>
    <li>9月10日室内基础班开课计划!</li>
    <li>9月10日室内基础班开课计划!</li>
  </ul>
</div>

css代码:

<style type="text/css">
* { margin:0; padding:0;}
body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
}
ul {
    list-style:none;
}


#header {
    margin:0 auto;
    height:30px;
    width:400px;
    border:1px solid;
}
#header li {
    float:left;
    padding:5px 20px;
}
#header li h1 {
    font-size:14px;
    color:#ccc;
}


#content {
    margin:0 auto;
    height:70px;
    width:400px;
    border:1px solid;
    line-height:20px;
}
#content li { padding-left:20px;}
</style>

js代码:

<script type="text/javascript">
function gaibian(n) {
    var leng=document.getElementById("header").getElementsByTagName("li").length;
    for (var i = 1; i <= leng; i++){
        if (i == n) {
            document.getElementById("tb"+i).style.display = "block";
        }else {
            document.getElementById("tb"+i).style.display = "none";
        }
    }
}
</script>


转载声明:本站发布文章及版权归原作者所有,转载本站文章请注明文章来源!

本文链接:http://gaogaojie.com/post/6.html

网友评论

复制成功
微信号: gaogaojie5
添加微信好友, 获取更多信息
我知道了
添加微信
微信号: gaogaojie5
添加微信好友, 获取更多信息
一键复制加过了
微信号:gaogaojie5添加微信