首页首页首页首页
作者：互联网
<!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