js选项卡

最新推荐文章于 2013-03-15 11:44:12 发布

第三个电饭锅

最新推荐文章于 2013-03-15 11:44:12 发布

阅读量675

点赞数

分类专栏： asp.net

本文链接：https://blog.csdn.net/w18767104183/article/details/8671617

版权

asp.net 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!--
 所学技术：
    1..className = "sec1";
    2.getElementById.getElementsByTagName 获取对象集
    3.target="_blank" 打开新窗口 
    4.list-style-type:none; 列表类型
    5.line-height 行高
    
    
    -->
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

    <style type="text/css">
      
        #header{background-color:#F8F4EF;height:200px;width:400px;border:1px solid #ECE1D5;font-family:"宋体";font-size:12px;}
        #menu{margin:0;padding:0;list-style-type:none;}
        #menu li{display:block;width:100px;line-height:23px;text-align:center;float:left;cursor:pointer;}
        .sec1{background-color:#FFFFCC;}
        .sec2{background-color:#00CCFF;}
        .block{display:block;}
        .unblock{display:none;}

    </style>
    <script >

                function secBoard(n) {
                    var menu = document.getElementById('menu').getElementsByTagName('li');
                    var main = document.getElementById('main').getElementsByTagName('li');
                    for (i = 0; i < menu.length; i++) {//全部变为sec1
                        menu[i].className = "sec1";
                    }
                    menu[n].className = "sec2";
                    for (i = 0; i < main.length; i++) {//全部变为none
                        main[i].className = "unblock";
                    }
                    main[n].className = "block";
                }

    </script>
</head>
<body>
  <div id="header">
      <!--导航选项区域-->
    <ul id="menu">
        <li class="sec1" οnmοuseοver="secBoard(0)">
        最新新闻
        </li>
        <li class="sec2" οnmοuseοver="secBoard(1)">
        最新文章
        </li>
        <li class="sec1" οnmοuseοver="secBoard(2)">
        最新日志
        </li>
        <li class="sec1" οnmοuseοver="secBoard(3)">
      论坛新帖
        </li>

    </ul>
      <!--导航选项区域-->
    
      <!--内容显示区域-->
    <ul id="main">
        <li class="block" >
        第一个内容：
        <a target="_blank" href="#">
      预防蜱虫必知的11个知识问答
        </a>
        </li>
        <li class="unblock" >
        第二个内容：
        <a target="_blank" href="#">
        购物商城限时抢购，倒计时JS代码
        </a>
        </li>
        <li class="unblock" >
        第三个内容：
        <a target="_blank" href="#">
        落魄千万富翁的一首歌，很man！
        </a>
        </li>
        <li class="unblock" >
        第四个内容：
        <a target="_blank" href="#">
        七十六个网站用户体验要点
        </a>
        </li>
    </ul>
      <!--内容显示区域-->
    </div>
</body>
</html>