`

DIV 切换(一)

    博客分类：
  • JSP
javascripthtml 
阅读更多 

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Servlet service</title>
<link type="text/css" href="css/firstpage.css" rel="stylesheet"></link>
</head>
<SCRIPT type="text/javascript"> 


    var nFocus = 0;
    var bFlag = false;
    var aLiTab, aDivTab;
    function c1() {
    
            var $ = function c($) {
                return document.getElementById($);
            };
        
        
           aLiTab = $("oUlTab").getElementsByTagName("li");
           aDivTab = [$("oDivTab1"), $("oDivTab2"), $("oDivTab100")];
        
        for (var i = 0; i < aLiTab.length; i++) {
            (
            
            function(i) {
                            var t = aLiTab[i];
                            t.onclick = function c() {
                                if (nFocus != i) {
                                    aLiTab[nFocus].className = "";
                                    aDivTab[nFocus].style.display = "none";
                                    nFocus = i;
                                    aLiTab[nFocus].className = "on";
                                    aDivTab[nFocus].style.display = "";
                                }
                                bFlag = true;
                            };
                            t.onmouseout = function c() {
                                bFlag = false;
                            };
                 }
            
            
            ) (i);
        }
    };
 
</script>


<script type="text/javascript">

    window.onload = function() {
       c1();
}
	
</script>


<body>
	<div class="bdtg-tit">
		<ul id="oUlTab">
			<li class="on"><a href="#"><p>a</p></a></li>


			<li><a href="#"><p>b</p></a></li>


			<li><a href="#"><p>c</p></a></li>
		</ul>
	</div>


	<div class="bq_d" id="oDivTab1">
		<div class="bq_n">
			<div class="bdtg-list">
				<table width="100%" cellpadding="0" cellspacing="0" border="0">
					<tr>
						<td i Align="top">content1</td>
					</tr>
				</table>
			</div>

		</div>
	</div>


	<div class="bq_d" id="oDivTab2" style="DISPLAY: none">
		<div class="bq_n">

			<div class="bdtg-list">

				<table width="100%" cellpadding="0" cellspacing="0" border="0">
					<tr>
						<td vAlign="top">content2</td>
					</tr>
				</table>


			</div>
		</div>
	</div>


	<div class="bq_d" id="oDivTab100" style="DISPLAY: none">
		<div class="bq_n">
			<div class="bdtg-list">


				<table width="100%" cellpadding="0" cellspacing="0" border="0">
					<tr>
						<td vAlign="top">content3</td>
					</tr>
				</table>



			</div>
		</div>
	</div>




</body>
</html>
分享到：
| HTML5 form例子
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

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

    左右切换div内容

    标题中的“左右切换div内容”指的是在网页设计中实现一种交互式效果，用户可以通过点击或滑动在两个或多个div（HTML文档中的分区元素）之间进行切换，通常用于展示不同的内容区块，如产品介绍、图片轮播或者文章列表...

    Jquery+div/css 鼠标经过内容切换实例

    本实例重点讲解如何利用 jQuery 和 CSS 技术实现在鼠标经过（hover）某个div元素时，动态切换显示的内容。下面我们将深入探讨这个主题。 首先，我们来理解 `div` 和 `CSS` 的基本概念。`div` 是HTML中的一个通用...

    div的图层切换函数

    图层切换功能则是一种常见的交互设计手法，可以让用户通过点击或触发某个事件来显示或隐藏不同的`div`层，提高用户体验。本教程将深入探讨如何创建一个简单、通用且代码量小的 `div` 图层切换函数。 首先，我们需要...

    点击按钮（a标签）隐藏显示div内容，切换div内容

    点击按钮（a标签）隐藏显示div内容，切换div内容

    jQuery Easing div切换效果的例子

    在本文中，我们将深入探讨jQuery Easing插件及其在实现div切换效果中的应用。jQuery Easing是一个非常实用的工具，它扩展了jQuery的核心动画功能，提供了丰富的缓动函数，使得过渡效果更加平滑、动态，为网页增添...

    div层完美切换代码

    在网页设计中，`div`层的切换是一种常见的交互效果，用于实现如模态框、选项卡、轮播图等功能。下面将详细讲解三种实现`div`层切换的方法，并探讨如何利用这些原理来创建更出色的界面。 ### 1. CSS（层叠样式表）...

    jquery+div实现同时滑动切换的图文展示特效插件下载.rar

    总之，"jQuery+div实现同时滑动切换的图文展示特效插件"是利用现代Web技术提升用户体验的一个优秀示例。它结合了jQuery的易用性和div的灵活性，提供了可定制的、平滑的滑动切换效果，是网页设计师和前端开发者的一个...

    纯div+css轮播图片切换图片

    在网页设计中，纯div+css实现的图片轮播是一种常见的动态效果，它能为网站增添生动性，吸引用户注意力。下面将详细讲解这个主题，包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 ...

    div 显示图片特效(一张张图片的切换)

    可以使用`setInterval`函数定期执行切换操作，例如每2秒钟切换一次： ```javascript let currentIndex = 0; const imageContainer = document.getElementById('imageContainer'); const images = imageContainer....

    使用jquery实现div的tab切换实例代码

    使用jquery实现div的tab切换实例代码,比较常用和实用的一种。

    jquery实现div模块轮播切换

    本文将深入探讨如何使用 jQuery 来实现一个div模块的轮播切换效果，这种效果通常用于展示多个图片或内容块，使得用户可以在有限的页面空间内浏览更多的信息。 首先，我们需要在HTML中创建轮播的基础结构。这通常...

    js 左右箭头实现图片或div内容切换

    在网页设计中，动态内容切换是一种常见的交互效果，可以提升用户体验。本文将深入探讨如何使用JavaScript（JS）通过左右箭头来实现图片或div内容的切换。这一功能广泛应用于产品展示、轮播图、滑动面板等场景。 ...

    js+div实现文字滚动和图片切换效果代码.docx

    【JS+Div实现文字滚动和图片切换效果代码详解】 在网页设计中，动态效果的实现能够增加用户体验，其中文字滚动和图片切换是最常见的交互方式之一。本文将详细讲解如何使用JavaScript（JS）和HTML Div元素来创建这样...

    div内text和label切换显示插件

    使用：点击div label text切换，label显示，text输入。切换到text后，等待超时后，会自动切换到label并写入值 数据接口：值写入到提供div的 data数据里，可以修改key（在初始化时） 可写参数：label ，text ，div 的...

    切换DIV标签

    用jsp写的一个类似标签切换Div的页面效果.

    微信div切换样式所需的js和css库

    在微信div切换样式的开发中，常常需要借助JavaScript和CSS库来实现动态的交互效果。本资源提供的就是一套专门用于这一目的的库，包括`example.css`，`zepto.min.js`以及`example.js`这三个关键文件。 首先，`...

    简单实用的单选按钮切换div

    简单实用的单选按钮切换div简单有效，可以直接看到效果

    select实现div图层切换效果（jquery实现）

    在网页设计中，有时我们需要通过不同的交互方式来切换页面上的元素显示，比如通过下拉框（select）的选择来改变div图层的展示。本示例就是利用jQuery库来实现这样的功能，使得用户在select中选择不同的选项时，对应...

Magicbox
Global site tag (gtag.js) - Google Analytics