`
zhw_9527
  • 浏览: 631 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

div控制

阅读更多
<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 控制器

    利用javascript写的,div生成器,大家可以下载看看

    css+div控制表格 标签代码

    标题“css+div控制表格 标签代码”表明我们将探讨如何利用CSS来改变和优化HTML表格的样式,使其符合网页设计的一般需求。 表格在网页中常用于展示结构化数据,其基本HTML标签包括`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;th&gt;`...

    漂亮的网站源码30个【华丽的JS特效+DIV控制布局】

    漂亮的网站整站源码30个【DIV控制布局+华丽的JS特效】 30个漂亮的网站源码 所有网站都采用CSS控制样式展现,没有table,都是DIV控制布局!更有一些网站有华丽丽的JS特效。 36个网站中包含了各行各业的网页设计,譬如...

    div控制条形图下面指针的指定位置

    "div控制条形图下面指针的指定位置"这个话题涉及到如何利用HTML的div元素以及JavaScript技术来实现一个条形图,并精确控制其中的指针在特定位置的显示。这通常用于制作数据仪表盘、数据分析界面等,帮助用户直观地...

    div控制最小高度又自适高度

    在网页布局设计中,`div`元素经常作为基础容器,用于组织页面内容。有时候,我们需要一个`div`既能保持一个最小的高度,以确保页面的基本结构,同时又能根据内部内容自动扩展其高度,以适应不同数量的内容。这在网页...

    DIV可移动 可实现任意拖动放大缩小

    这涉及到获取鼠标的当前位置和div的初始位置,然后更新div的`style.left`和`style.top`属性。 4. **缩放功能**:实现div的缩放功能,可能需要监听`mousedown`和`mousemove`事件,并且需要计算鼠标点击的位置(作为...

    使用css和div控制网页(一些例子:我的主页,情感小驿,网站logo,简单动画).zip

    本教程通过一系列实例展示了如何利用CSS和`div`来控制网页的样式、布局和交互效果,包括“我的主页”、“情感小驿”、网站Logo以及简单的动画效果。 首先,我们来看`div`元素。`div`是一个通用的容器标签,用于组合...

    用JS来控制DIV样式的display属性

    ### 使用JavaScript控制DIV元素的Display属性 在网页开发过程中,我们经常会遇到需要动态显示或隐藏某个元素的需求。本文将详细介绍如何使用JavaScript(JS)来控制HTML中的DIV元素的`display`属性,从而实现元素的...

    js控制div全屏

    在网页设计中,有时我们需要将某个`div`元素设置为全屏显示,以提供沉浸式的用户体验或特定功能的实现。JavaScript(简称js)作为一种强大的客户端脚本语言,可以帮助我们轻松实现这一需求。在这个项目中,我们使用...

    HTML5_中_div_section_article_的区别

    同时,整个页面的结构可能由 div 控制,以实现视觉布局和样式化。 在编写 HTML5 代码时,遵循语义化的原则至关重要,这不仅有助于搜索引擎优化(SEO),还可以提高可访问性,使屏幕阅读器和其他辅助技术能更好地...

    ajax控制div窗口显示和隐藏

    本主题主要关注如何使用Ajax来控制div窗口的显示和隐藏,这对于实现交互式用户体验至关重要。 一、Ajax基础 Ajax的核心是JavaScript对象XMLHttpRequest,它在后台与服务器进行通信,实现了异步数据传输。创建一个...

    js控制div左右切换带左右箭头

    在网页设计中,"js控制div左右切换带左右箭头"是一种常见的交互效果,它用于展示多内容区域,用户可以通过点击或悬浮在左、右箭头上实现内容的切换。这种效果常见于产品展示、轮播图或者选项卡式布局中,能够提供...

    用div实现悬浮窗+锁屏(防弹出窗体)

    为了实现弹出窗口的打开和关闭,可以使用JavaScript来控制`div`的显示和隐藏。例如,通过改变`display`属性的值: ```javascript function openPopup() { document.getElementById('popup').style.display = '...

    js控制六个div的大小变化

    在网页开发中,JavaScript(JS)是一种至关重要...总之,JavaScript控制&lt;div&gt;的大小变化以及添加动画效果,是网页动态设计中的常见手法。通过合理的JavaScript代码和CSS样式,我们可以创建出丰富多样的交互式用户界面。

    控制Div显示和隐藏

    本程序在网页中设计了Div层的显示和隐藏,代码简单、实用。

    div浮出 控制层伸缩

    div浮出 控制层伸缩 div浮出 控制层伸缩 div浮出 控制层伸缩

    单选按钮控制div

    单选按钮控制div显示 本代码是5个单选 然后控制5个div

    js控制div分散合拢淡出淡入效果

    在JavaScript(JS)中,...这个例子中的“js控制div分散合拢淡出淡入效果”是一个很好的起点,帮助开发者了解如何用JS实现此类特效,特别是在IE环境下。在实践过程中,不断学习和优化代码,将有助于提升JS编程技能。

    JS控制div跳转到指定的位置的几种解决方案总结

    &lt;div id="div1"&gt;div1&lt;/div&gt; &lt;div id="div2"&gt;div2&lt;/div&gt; &lt;div id="div3"&gt;div3&lt;/div&gt; ``` 这种方法的优点是不需要额外的JavaScript代码,即插即用,且兼容性好。但它的缺点也很明显:点击链接后URL会改变,页面刷新时...

    JQ控制两DIV高度自动相等

    "JQ控制两DIV高度自动相等"这个话题就是关于如何使用JavaScript库jQuery来实现这一功能。这里我们将深入探讨如何实现这个效果,以及涉及到的相关知识点。 首先,我们有两个主要的HTML元素,即两个`div`,它们的初始...

Global site tag (gtag.js) - Google Analytics