<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.menu{
height: 39px;
width: 1000px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
.menu .item{
float: left;
height: 30px;
width: 80px;
font-size: 16px;
color:#000000;
line-height: 30px;
font-weight: bold;
text-align:center;
margin-left:15px;
margin-top:3px;
cursor: pointer;
}
.menu .item_sel {
float: left;
height: 30px;
width: 80px;
font-size: 16px;
color:#000099;
line-height: 30px;
font-weight: bold;
text-align:center;
margin-left:15px;
margin-top:3px;
cursor: pointer;
background-color:#999999;
}
-->
</style>
<script type="text/javascript" >
var documentDivCount = document.getElementsByTagName("div"); //全局变量, 所有div的值
//页面加载初始化
window.onload=function(){
setMenuDiv();
initializeMenu();
}
//设置菜单onclick事件
function setMenuDiv(){
for(i = 0; i < documentDivCount.length; i++) {
if(documentDivCount[i].className == "item"){
documentDivCount[i].onclick = function (){setMenuOnclickClassName(this);}
documentDivCount[i].TABINDEX = i;
}
}
}
function initializeMenu(){
for(i = 0; i < documentDivCount.length; i++) {
if(trim(documentDivCount[i].className) == "item"){
addClass(documentDivCount[i],"item_sel");
break
}
}
}
//鼠标单击菜单 添加Class
function setMenuOnclickClassName(obj){
for(i = 0; i < documentDivCount.length; i++) {
if(trim(documentDivCount[i].className) == "item" || documentDivCount[i].className == "item item_sel"){
if(obj.TABINDEX == documentDivCount[i].TABINDEX){
if(trim(obj.className) == "item"){
addClass(obj,"item_sel");
continue
}else{
removeClass(obj,"item_sel");
continue
}
}else{
removeClass(documentDivCount[i],"item_sel");
}
}
}
}
//清除空格
function trim(string)
{
return string.replace(/(^\s*)|(\s*$)/g, "");
}
//检索class
function hasClass(element, className) {
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
return element.className.match(reg);
}
//添加class
function addClass(element, className) {
if (!this.hasClass(element, className)) {
element.className += " "+className;
}
}
//删除class
function removeClass(element, className) {
if (hasClass(element, className)) {
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
element.className = element.className.replace(reg,'');
}
}
</script>
</head>
<body>
<div class="menu">
<div class="item">首页</div>
<div class="item">走进TF</div>
<div class="item">产品中心</div>
<div class="item">新闻中心</div>
<div class="item">研发中心</div>
<div class="item">营销网络</div>
<div class="item">精英团队</div>
<div class="item">招贤纳士</div>
<div class="item">联系我们</div>
</div>
</body>
</html>
分享到：
相关推荐
通过使用JavaScript和CSS，我们可以创建交互性强、视觉效果良好的选项卡组件。下面将详细介绍如何利用这两种技术实现选项卡功能，并提供相关的知识点。 首先，CSS（Cascading Style Sheets）在构建选项卡样式方面起...
CSS Tab选项卡的实现可以完全不依赖JavaScript，利用`:target`伪类来切换内容的显示。当用户点击某个标签时，对应的ID将会添加到URL的哈希部分，`:target`伪类可以检测这个变化并隐藏其他内容。 3. **响应式设计**...
纯CSS3经典Tab选项卡动画特效是一种无需JavaScript插件，仅通过CSS3属性实现的交互设计。这种技术在现代网页设计中广泛应用，因为其能够提供流畅的用户体验且减少了对JavaScript的依赖，从而优化了页面加载速度。...
通过这个简单的例子，我们可以看到`DIV+CSS+JavaScript`的结合如何实现一个基本的选项卡功能。这只是前端开发中的一种常见应用，随着技术的发展，还有更多的交互效果和复杂功能等待开发者去探索和实现。希望这个教程...
总结，HTML实现Tab选项卡结合了HTML、CSS和JavaScript技术，通过合理的设计和交互逻辑，可以创建出既美观又实用的网页组件。自动和手动切换功能使用户可以根据需求自由控制信息的显示，提升了网页的易用性。在实际...
在本主题“css+div漂亮的圆角tab选项卡”中，我们将深入探讨如何利用CSS和HTML创建具有美观圆角效果的tab选项卡。 首先，HTML结构是实现tab选项卡的基础。一个基本的tab选项卡结构通常包含一个容器（如`<div>`），...
本文将详细介绍如何使用JavaScript（js）和层叠样式表（css）来实现一个简单的选项卡切换功能，并通过分析`demo.html`文件来展示具体的实现步骤。 首先，我们需要在HTML文件中创建基本的结构。一个典型的选项卡布局...
<li><a href="#" data-target="tab1">选项卡1</a></li> <li><a href="#" data-target="tab2">选项卡2</a></li> <li><a href="#" data-target="tab3">选项卡3</a></li> <div class="tab-content"> <div id="...
在"CSS+JS实现的圆角边框TAB选项卡滑动门代码"实例中，我们将深入探讨以下关键知识点： 1. **CSS圆角边框**：CSS3的`border-radius`属性用于设置元素边框的圆角半径，允许我们创建不同大小的圆角效果。例如，`...
描述中提到的“Tab选项卡tabulous.js”是一款JavaScript插件，用于实现动态和交互式的Tab功能。Tabulous.js以其轻量级和强大的功能著称，它能够帮助开发者快速创建出具有动画效果、响应式布局的Tab组件。这款插件...
在网页设计中，选项卡（Tab）是一种常见的交互元素，用于组织和展示大量内容，而无需用户滚动或点击多个页面。本教程将详细介绍如何利用jQuery和CSS技术来创建一款功能完善的选项卡组件，并且需要引入jQuery UI库以...
本文将深入探讨使用JavaScript和CSS来创建动态、交互式的选项卡组件。 首先，我们要理解选项卡的基本结构。一个典型的选项卡由以下几个部分组成： 1. **容器**：这是选项卡组件的整体包裹元素，通常是一个`div`。 ...
在网页设计中，选项卡（Tab）组件是一个常见的交互元素，它允许用户在不同的内容区域之间切换，而无需刷新整个页面。在这个主题中，我们将深入探讨如何使用 HTML 和 CSS 实现一个简洁的选项卡功能。 首先，HTML ...
不规则TAB选项卡JS代码是指使用JavaScript实现的一种具有独特设计风格的选项卡功能。JavaScript是网页开发中的重要脚本语言，它允许我们动态更新内容、响应用户交互并实现复杂的网页逻辑。 不规则TAB选项卡的设计...
总结来说，这个项目结合了jQuery的动态功能和CSS3的视觉特效，实现了响应式的TAB选项卡和幻灯片切换，为用户提供了一种在不同设备上浏览内容的有效方式。这种技术在现代网页设计中非常流行，也是前端开发者必备的...
接下来，我们将深入探讨如何使用HTML、CSS和JavaScript实现Tab选项卡功能。 首先，HTML（HyperText Markup Language）是网页的基础，用于定义内容的结构。在Tab选项卡的设计中，我们可以使用`<div>`元素来创建每个...
在这个例子中，`tab-header`包含所有选项卡的标题，每个`tab-title`代表一个选项卡，`tab-content`则包含相应选项卡的内容。`active`类用于标识当前选中的选项卡。 接下来，我们使用CSS来定义样式。CSS可以用来设置...
【标题】：“div+css制作Tab选项卡” 【描述】：本文将介绍如何使用HTML的div元素和CSS来创建Tab选项卡，适用于PHP网站的建设。我们将通过Dreamweaver或直接编写代码的方式，逐步解析Tab选项卡的实现过程。 【标签...
在网页设计中，Tab选项卡是一种常见的交互设计模式，它...要实现完整的功能，开发者需要结合JavaScript来处理用户的交互行为，完成Tab选项卡的动态切换。对于初学者来说，理解这些基础知识是迈向专业网页开发的第一步。
本知识点主要聚焦于layui中的Tab选项卡切换特效及其相关的HTML、CSS和JavaScript技术。 首先，layui的Tab选项卡是一个常见的页面布局元素，用于将大量内容组织成清晰、简洁的模块，用户可以通过点击不同的选项卡来...