`

DIV 切换(二)

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

<%@ 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 language="javascript">
<!--
function mc(divnum,obj,divname,handlename,sname,noname)
{
//关于层切换的js
//定义显示层 数组，
  var target = new Array(divnum) ; 
  var d = new Array(divnum) ;
  for(var i=0;i<divnum;i++){
   target[i]=divname+eval(i+1); 
   //定义层的手柄（主要是更换背景用得）
   d[i]=handlename+eval(i+1);
  }  
// 循环操作div 
  for(var i=0;i<divnum;i++) 
  { 
  if(i==obj)
   { 
  
  var v=document.getElementById(target[i]); 
 
  var bg=document.getElementById(d[i]);
   bg.className=sname;
   v.style.display="block";
   
    } 
   else 
   { 
   var bg=document.getElementById(d[i]);
   var v=document.getElementById(target[i]); 
   bg.className=noname;
   v.style.display="none"; 
   } 
  } 
}
-->
</script>




<body>
	<div id="rightnews1">
  <div class="jumpmenu1">
    <div id="topnew1" onmouseover="mc(3,0,'content','topnew','smenu','menu')" class="smenu">&nbsp;新闻中心</div>
    <div id="topnew2"  onmouseover="mc(3,1,'content','topnew','smenu','menu')" class="menu">&nbsp;&nbsp;热点聚焦</div>
    <div id="topnew3"  onmouseover="mc(3,2,'content','topnew','smenu','menu')" class="menu">&nbsp;&nbsp;行业动态</div>
  </div>
  <div id="content1" >111111111111</div>
  <div id="content2" class="hidecontent">2222222222222</div>
  <div id="content3" class="hidecontent">3333333333</div>  
</div>
js 函数可以直接调用

<!--
/**************
*div切换函数的解释
*mc（div 层的个数,传入对象id，div层的名字，手柄的名字，鼠标离开后的图片，鼠标离开前的图片）
*注意：层和手柄的名字都不包括数字
**************/
-->
<script language="javascript">
<!--
function mc(divnum,obj,divname,handlename,offpic,onpic)
{
//关于层切换的js
//定义显示层 数组，
  var target = new Array(divnum) ; 
  var d = new Array(divnum) ;
  for(var i=0;i<divnum;i++){
   target[i]=divname+eval(i+1); 
   //定义层的手柄（主要是更换背景用得）
   d[i]=handlename+eval(i+1);
  }  
// 循环操作div 
  for(var i=0;i<divnum;i++) 
  { 
  if(i==obj)
   { 
  var v=document.getElementById(target[i]); 
  var bg=document.getElementById(d[i]);
   v.style.display="block"; 
   //鼠标移动过后的图片  
    bg.background=offpic; 
    } 
   else 
   { 
   var bg=document.getElementById(d[i]);
   var v=document.getElementById(target[i]); 
   v.style.display="none"; 
   //鼠标放在手柄上的图片 
   bg.background=onpic; 
   } 
  } 
}
-->
</script>
<table width="586" height="121" border="1">
  <tr style="cursor:pointer">
    <td onMouseOver="mc(4,0,'div','d','33.jpg','22.jpg')"  background="33.jpg" id="d1">层一</td>
    <td onMouseOver="mc(4,1,'div','d','33.jpg','22.jpg')"  background="22.jpg" id="d2">层二 </td>
    <td onMouseOver="mc(4,2,'div','d','33.jpg','22.jpg')"  background="22.jpg" id="d3">层三</td>
    <td onMouseOver="mc(4,3,'div','d','33.jpg','22.jpg')"  background="22.jpg" id="d4">层四</td>
  </tr>
  <tr>
    <td colspan="4">
    <div id="div1">11111111111111111111</div>
    <div id="div2" style="display:none">222222222222222</div>
    <div id="div3" style="display:none">333333333333333</div>
    <div id="div4" style="display:none">4444444444444444</div></td>
  </tr>
</table> 

	




</body>
</html>
分享到：
| DIV 切换(一)
评论
1 楼 dimingchan 2012-01-03  
            
发表评论

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

相关推荐

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

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

    左右切换div内容

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

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

    超级实用的点击隐藏，显示div内容，切换div内容 点击按钮（a标签）

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

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

    jQuery Easing div切换效果的例子

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

    div的图层切换函数

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

    div层完美切换代码

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

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

    下面将详细讲解这个主题，包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 图片切换是通过CSS控制图片的显示和隐藏，实现图片的动态变化。这通常涉及到CSS的`display`属性，通过改变...

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

    在本插件中，jQuery被用来控制div元素的滑动动画，使得图文内容能够按照预设的方式进行平滑切换。 div元素在HTML中是一个非常基础但又灵活的容器，它可以容纳文本、图像、其他HTML元素等，用于组织页面布局。在这个...

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

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

    div内text和label切换显示插件

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

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

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

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

    在网页设计中，使用`div`元素配合JavaScript实现图片切换是一种常见的动态效果，可以为用户提供更丰富的视觉体验。本文将详细讲解如何通过`div`和JavaScript实现一张张图片的平滑切换。 首先，我们需要理解`div`...

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

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

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

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

    切换DIV标签

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

    jquery实现div模块轮播切换

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

    单选按钮实现div之间的切换

    在jsp中利用单选按钮实现两个div之间的显示与隐藏

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

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

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