首页首页首页首页

2021-12-31 12:32:08 阅读：137 来源： 互联网

标签：tabbox color text number content 首页 tab

<!DOCTYPE html>

</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>

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

首页首页首页首页