<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style/NewMaster.css" rel="stylesheet" type="text/css" />
</head>
<script>
function ShowLayers(n,m)
{
for(i=1;i<=m;i++)
{
eval("content" + i).style.display="none";
eval("title"+i+".className='menu-off';");
}
eval("title"+n+".className='menu-on';");
eval("content" + n).style.display="";
}
</script>
<body>
<div class="menu">
<div class="menu-inner">
<ul>
<li height="20" id="title1" class="menu-on"><a onclick="javascript:ShowLayers(1,5);">标题1</a></li>
<li id="title2" class="menu-off"><a onclick="javascript:ShowLayers(2,5);">标题2</a></li>
<li id="title3" class="menu-off"><a onclick="javascript:ShowLayers(3,5);">标题3</a></li>
<li id="title4" class="menu-off"><a onclick="javascript:ShowLayers(4,5);">标题4</a></li>
<li id="title5" class="menu-off"><a onclick="javascript:ShowLayers(5,5);">标题5</a></li>
</ul>
</div>
</div>
<div id="content1" style="display:inline;border:1px solid #d6d6d6;width:100%;padding:8px;" class="Main">
内容1
</div>
<div id="content2" style="display:none;border:1px solid #d6d6d6;width:100%;padding:8px;" class="Main" >
内容2
</div>
<div id="content3" style="display:none;border:1px solid #d6d6d6;width:100%;padding:8px;" class="Main">
内容3
</div>
<div id="content4" style="display:none;border:1px solid #d6d6d6;width:100%;padding:8px;" class="Main">
内容4
</div>
<div id="content5" style="display:none;border:1px solid #d6d6d6;width:100%;padding:8px;" class="Main">
内容5
</div>
</body>
分享到:
相关推荐
利用javascript写的,div生成器,大家可以下载看看
标题“css+div控制表格 标签代码”表明我们将探讨如何利用CSS来改变和优化HTML表格的样式,使其符合网页设计的一般需求。 表格在网页中常用于展示结构化数据,其基本HTML标签包括`<table>`、`<tr>`(行)、`<th>`...
漂亮的网站整站源码30个【DIV控制布局+华丽的JS特效】 30个漂亮的网站源码 所有网站都采用CSS控制样式展现,没有table,都是DIV控制布局!更有一些网站有华丽丽的JS特效。 36个网站中包含了各行各业的网页设计,譬如...
"div控制条形图下面指针的指定位置"这个话题涉及到如何利用HTML的div元素以及JavaScript技术来实现一个条形图,并精确控制其中的指针在特定位置的显示。这通常用于制作数据仪表盘、数据分析界面等,帮助用户直观地...
在网页布局设计中,`div`元素经常作为基础容器,用于组织页面内容。有时候,我们需要一个`div`既能保持一个最小的高度,以确保页面的基本结构,同时又能根据内部内容自动扩展其高度,以适应不同数量的内容。这在网页...
这涉及到获取鼠标的当前位置和div的初始位置,然后更新div的`style.left`和`style.top`属性。 4. **缩放功能**:实现div的缩放功能,可能需要监听`mousedown`和`mousemove`事件,并且需要计算鼠标点击的位置(作为...
本教程通过一系列实例展示了如何利用CSS和`div`来控制网页的样式、布局和交互效果,包括“我的主页”、“情感小驿”、网站Logo以及简单的动画效果。 首先,我们来看`div`元素。`div`是一个通用的容器标签,用于组合...
### 使用JavaScript控制DIV元素的Display属性 在网页开发过程中,我们经常会遇到需要动态显示或隐藏某个元素的需求。本文将详细介绍如何使用JavaScript(JS)来控制HTML中的DIV元素的`display`属性,从而实现元素的...
在网页设计中,有时我们需要将某个`div`元素设置为全屏显示,以提供沉浸式的用户体验或特定功能的实现。JavaScript(简称js)作为一种强大的客户端脚本语言,可以帮助我们轻松实现这一需求。在这个项目中,我们使用...
同时,整个页面的结构可能由 div 控制,以实现视觉布局和样式化。 在编写 HTML5 代码时,遵循语义化的原则至关重要,这不仅有助于搜索引擎优化(SEO),还可以提高可访问性,使屏幕阅读器和其他辅助技术能更好地...
本主题主要关注如何使用Ajax来控制div窗口的显示和隐藏,这对于实现交互式用户体验至关重要。 一、Ajax基础 Ajax的核心是JavaScript对象XMLHttpRequest,它在后台与服务器进行通信,实现了异步数据传输。创建一个...
在网页设计中,"js控制div左右切换带左右箭头"是一种常见的交互效果,它用于展示多内容区域,用户可以通过点击或悬浮在左、右箭头上实现内容的切换。这种效果常见于产品展示、轮播图或者选项卡式布局中,能够提供...
为了实现弹出窗口的打开和关闭,可以使用JavaScript来控制`div`的显示和隐藏。例如,通过改变`display`属性的值: ```javascript function openPopup() { document.getElementById('popup').style.display = '...
在网页开发中,JavaScript(JS)是一种至关重要...总之,JavaScript控制<div>的大小变化以及添加动画效果,是网页动态设计中的常见手法。通过合理的JavaScript代码和CSS样式,我们可以创建出丰富多样的交互式用户界面。
本程序在网页中设计了Div层的显示和隐藏,代码简单、实用。
div浮出 控制层伸缩 div浮出 控制层伸缩 div浮出 控制层伸缩
单选按钮控制div显示 本代码是5个单选 然后控制5个div
在JavaScript(JS)中,...这个例子中的“js控制div分散合拢淡出淡入效果”是一个很好的起点,帮助开发者了解如何用JS实现此类特效,特别是在IE环境下。在实践过程中,不断学习和优化代码,将有助于提升JS编程技能。
<div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> ``` 这种方法的优点是不需要额外的JavaScript代码,即插即用,且兼容性好。但它的缺点也很明显:点击链接后URL会改变,页面刷新时...
"JQ控制两DIV高度自动相等"这个话题就是关于如何使用JavaScript库jQuery来实现这一功能。这里我们将深入探讨如何实现这个效果,以及涉及到的相关知识点。 首先,我们有两个主要的HTML元素,即两个`div`,它们的初始...