其他分享
首页 > 其他分享> > 首页首页首页首页

首页首页首页首页

作者:互联网

<!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>
</head>
<frameset rows="100,*,80" frameborder="no" border="0" framespacing="0">
    <frame src="Top.aspx" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
    <frameset cols="220,*" border="1">
        <frame src="left.aspx" name="mainFrame" scrolling="No" id="mainFrame" title="mainFrame" />
        <frame src="main.aspx" name="main2Frame" scrolling="No" id="main2Frame" title="main2Frame" />
    </frameset>
    <frame src="bottom.aspx" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" title="bottomFrame" />
</frameset>
<noframes>
    <body>
    </body>
</noframes>

</html>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="top.aspx.cs" Inherits="WorkAppUI.Admin.top" %>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery仿腾讯云下拉导航DEMO演示</title>
    <style>
*{margin:0;padding:0;list-style:none;}
body{font-size:12px;color:#666;text-align:left;}
h1{text-align:center;}

.tabbox{background:#fff;font-family:'微软雅黑';}
.tabbox .tab{ width:600px;margin:0 auto;  line-height:40px; text-align:center; color:#fff; overflow:hidden;}
.tabbox .tab a{display:block;padding:10px 20px;float:left;text-decoration:none;color:#333;}
.tabbox .tab a:hover{background:#E64E3F;color:#fff;text-decoration:none;}
.tabbox .tab a.on{background:#E64E3F;color:#fff;text-decoration:none;}
.tabbox .content{overflow:hidden;padding:10px;background:#E64E3F;}
.tabbox .content li{display:none;color:#fff;}
    </style>
    
</head>

<body>
    <!-- 代码部分begin -->
<div class="tabbox">
    <div class="tab">
        <a href="javascript:;" class="on">tab1</a>
        <a href="javascript:;">tab2</a>
        <a href="javascript:;">tab3</a>
        <a href="javascript:;">tab4</a>
    </div>
    <div class="content">
        <ul>
            <li><p>tab1内容1</p></li>
            <li><p>tab1内容2</p></li>
            <li><p>tab1内容3</p></li>
            <li><p>tab1内容4</p></li>
        </ul>
    </div>
</div>
    <script src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function () {
        $(".tabbox .tab a").mouseover(function () {
            $(this).addClass('on').siblings().removeClass('on');
            var index = $(this).index();
            number = index;
            $('.tabbox .content li').hide();
            $('.tabbox .content li:eq(' + index + ')').show();
        });
        $('.tabbox .content li:eq(0)').show();
        //var auto = 1;  //等于1则自动切换,其他任意数字则不自动切换
        //if (auto == 1) {
        //    var number = 0;
        //    var maxNumber = $('.tabbox .tab a').length;
        //    function autotab() {
        //        number++;
        //        number == maxNumber ? number = 0 : number;
        //        $('.tabbox .tab a:eq(' + number + ')').addClass('on').siblings().removeClass('on');
        //        $('.tabbox .content ul li:eq(' + number + ')').show().siblings().hide();
        //    }
        //    var tabChange = setInterval(autotab, 3000);
        //    //鼠标悬停暂停切换
        //    $('.tabbox').mouseover(function () {
        //        clearInterval(tabChange);
        //    });
        //    $('.tabbox').mouseout(function () {
        //        tabChange = setInterval(autotab, 3000);
        //    });
        //}
    });
</script>
</body>
</html>

标签:tabbox,color,text,number,content,首页,tab
来源: https://blog.csdn.net/xiexuzhao/article/details/122253874