<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tab菜单</title>
<style type="text/css">
body
{
margin-bottom:20px;
background-color:Gray;
}
#tab{
width:780px;
border:0px;
}
#menu
{
float:left;
z-index:0;
}
#menu ul
{
margin:0px;
padding:0px;
list-style-type:none;
}
#menu li
{
float:left;
display:block;
cursor:pointer;
width:130px;
text-align:center;
padding:10px 0px;
background-color:#a3dbff;
border-right:1px solid #fff;
}
#menu li.hover{
background:#fff;
border-bottom:solid 1px #fff;
}
#main1
{
z-index:-1;
position :relative;
top:-1px;
clear:left;
border:solid 1px blue;
background-color:#C6E2FF;
}
#main1 ul{
display: none;
list-style:none;
}
#main1 ul.block{
display: block;
}
</style>
<script type="text/javascript">
function setTab(n){
var tli=document.getElementById("menu").getElementsByTagName("li");
var mli=document.getElementById("main1").getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
</script>
</head>
<body>
<div id="tab">
<div id="menu">
<ul>
<li class="hover" onmouseover="setTab(0)">菜单1</li>
<li onmouseover="setTab(1)">菜单2</li>
<li onmouseover="setTab(2)">菜单3</li>
<li onmouseover="setTab(3)">菜单4</li>
</ul>
</div>
<div id="main1">
<ul class="block">
<li>aaaaaaaaa</li>
</ul>
<ul>
<li>bbbbbbbbbb</li>
</ul>
<ul>
<li>cccccccccc</li>
</ul>
<ul>
<li>ddddddddd</li>
</ul>
</div>
</div>
</body>
</html>
分享到：
相关推荐
以上步骤就完成了一个基于jQuery的无刷新tab菜单的实现。这个菜单在用户切换选项时不会重新加载页面，提高了用户体验。通过调整CSS样式，可以进一步自定义tab菜单的外观，以适应不同网站的设计风格。同时，根据实际...
"js实现无回发的Tab菜单"是一个利用JavaScript技术来创建这样的功能，使得在切换Tab时，服务器不会重新加载整个页面，从而提高用户体验和网页性能。在本案例中，我们使用了"tabstrip"这个概念，它可能是指一个特定的...
3. **JavaScript/jQuery**：JavaScript或jQuery是实现无刷新切换的核心。通过监听tab标题的点击事件，我们可以动态地更改当前选中tab的状态（例如添加一个激活类），并根据该状态显示或隐藏相应的内容区域。这通常...
同时，也可以结合AJAX技术，实现无刷新的Tab切换效果，提高用户体验。 总的来说，要实现Tab菜单切换功能，你需要掌握HTML结构设计、CSS样式编写以及JavaScript或jQuery的事件处理。对于ASP.NET开发者，还需要理解...
然而，Layui的tab组件默认情况下在切换标签页时并不会刷新内容，有时这种默认行为并不满足开发者的实际需求，比如在某些场景下，我们需要在切换标签页时获取最新的数据或重新渲染组件。这时就需要设置标签页的刷新...
描述进一步解释了这个例子的特点：在同一页面上同时展示了两种不同类型的TAB菜单。一种是传统的点击式选项卡，用户需通过点击相应的标签来切换内容；另一种是悬停式选项卡，只需将鼠标移到特定区域，内容就会即时...
在本项目中，我们主要探讨的是如何利用CSS和AJAX技术来实现一个动态的TAB菜单。这个菜单的数据是通过PHP从MySQL数据库中获取并显示的，具有一定的灵活性，允许开发者根据需要更换不同的编程语言来处理后台逻辑。 ...
无限级可刷新Js树型菜单是一种常见的前端交互设计，它在网页应用中广泛用于展示具有层级关系的数据，如文件系统、组织结构或者导航菜单。这种菜单的特点在于它可以无限制地展开和折叠各级节点，同时具备实时刷新功能...
"Ajax无刷新内容tabs标签切换"是一种技术，它允许用户在不重新加载整个网页的情况下切换页面内容，显著提升了交互性与效率。这种技术通常用于构建诸如导航菜单、选项卡式界面等元素，让用户能够快速浏览和操作大量...
"Snazzy Border Menus" 是一款用于创建独特且引人注目的上下TAB菜单的JavaScript特效库。这个库主要用于提升网站的用户体验，特别是在导航菜单设计上。它通过动态的边框动画，使得用户在切换菜单选项时有更直观、更...
实现了获取评论无刷新，发表评论无刷新，www.sendawangluo.com页面获取评论时显示loading加载效果jquery真的是一个非常优秀的JS库，简单容易掌握，对于网页中的多级菜单、级联效果、Tab选项卡切换、图片轮转显示，...
在"layui，登陆，左侧菜单实现"这个主题中，我们将深入探讨如何利用LayUI来创建动态加载的左侧菜单以及集成tab组件，以实现一个完整的登录功能和页面导航。 首先，我们需要了解LayUI的基础结构。LayUI的核心是layui...
Tab页是一种组织和展示信息的有效方式，它允许用户在多个相关的视图之间切换，而无需刷新整个页面。在Ace Admin中，Tab页通常通过HTML、CSS和JavaScript来实现，其中JavaScript负责动态地添加、删除和切换Tab。 ...
在本示例中，我们将关注如何在EasyUI的Tab组件上添加右键菜单，实现包括刷新、关闭、全部关闭、关闭左侧和关闭右侧等操作。 首先，我们需要理解EasyUI的Tab组件。Tab组件是EasyUI中的一个核心组件，用于展示多个...
Tab切换是一种常见的用户界面设计模式，它允许用户在多个视图或内容区域之间切换，而无需刷新整个页面。这种效果通常用于展示有限数量的相关信息，如设置面板、产品选项或导航菜单。 首先，让我们了解CSS3的基础...
在本文中，我们将深入探讨如何使用WPF（Windows Presentation Foundation）和CefSharp库来创建一个功能丰富的浏览器应用，其中包括Tab分页、文件下载、收藏、刷新、删除以及新窗口等核心功能。CefSharp是一个.NET...
本资源提供的"很不错的js实现选项卡菜单"是一个美观且实用的JavaScript解决方案，它能为网站增添互动性和用户体验。 1. **选项卡的基本结构**：选项卡通常由两部分组成——标签（tab）和内容面板（panel）。标签...
"仿制Outlook菜单 js"项目就是这样一个例子，它使用JavaScript语言来实现类似Outlook的左侧菜单导航，适用于小型项目的后台管理系统界面。 JavaScript（简称JS）是Web开发中常用的脚本语言，主要负责客户端的动态...
EasyUI Tab是一个基于jQuery和EasyUI框架的优秀Tab选项卡插件，它为网页应用程序提供了简单、高效且灵活的选项卡管理功能。EasyUI是一个轻量级的前端开发框架，集合了众多实用的组件，如表格、对话框、菜单、树形...
4. **Ajax技术**：为了提供更好的用户体验，可能使用了Ajax技术来实现无刷新的Tab切换。Asp.net2.0引入了Ajax支持，通过UpdatePanel控件，可以在不刷新整个页面的情况下更新部分内容，使得Tab切换更加平滑。 5. **...