只用div+css不用js，怎么实现，点击一个div link显示另一个原本（display为none的div)

假如第一个层id为a1，第二层id为a2我要具体方案，谁写个给我，我再加15分... 假如第一个层id为a1，第二层id为a2
我要具体方案，谁写个给我，我再加15分展开

 我来答

3个回答

匿名用户
2011-05-06

展开全部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
div {
width:200px;
height:80px;
background:#f00;
margin:20px 0;
}
.no {
display:none;
}
.dis {
display:block;
}
</style>
</head>
<body>
<div id="a1" onclick="a2.className='dis'">请你点点我这一块吧！</div>
<div id="a2" class="no">我出来了哟！！！</div>
</body>
</html>

本回答由提问者推荐

已赞过 已踩过<

评论收起

手机用户69785
2011-05-06 · TA获得超过255个赞

知道答主

回答量：570

采纳率：0%

帮助的人：337万

我也去答题访问个人页

关注

展开全部

把$("#testTable").mouseout改成$("#testTable").mouseleave

mouseout在鼠标移入子元素时也会触发，而mouseleave只会在鼠标移出本元素时触发

以下是完整代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript" src="jquery.js"></SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

//-----------------------------

var slowObj;
var objWidth;
var objHeight;
var iter;
var operator;
var flag = true;
function SlowDiv2(tableId,operator2){
slowObj = $("#"+tableId);
if(flag){
objWidth = slowObj.width();
objHeight = slowObj.height();
flag = false;
}

slowObj.css();
operator = operator2;
if(operator=="show"){
slowObj.width(0);
slowObj.height(0);
}
iter = setInterval(operateTable,14);
}

function operateTable(){
var tmpWidth = slowObj.width();
var tmpHeight = slowObj.height();
if(operator=="hide"){
//隐藏table
if( (tmpWidth<=18 || tmpWidth-10<=0 ) & (tmpHeight<=18 || tmpHeight<=0)){
var d = clearInterval(iter);
slowObj.hide();
return;
}else{
slowObj.width(tmpWidth-10);
slowObj.height(tmpHeight-10);
$("#ttest").val("-"+slowObj.width());
}

//$("#ttest").val(objWidth);
}else{
//显示table
slowObj.show();
if(tmpWidth+10>objWidth || tmpHeight+10>objHeight){
var d = clearInterval(iter);
slowObj.width(objWidth);
slowObj.height(objHeight);
return;
}else{
slowObj.width(tmpWidth+20);
slowObj.height(tmpHeight+2);
$("#ttest").val("+"+slowObj.width());
}
// $("#ttest").val(objWidth);
}
}

$(document).ready(function(){
$("#S_switch").mouseover(function(){
SlowDiv2("testTable","show");
$("#S_switch").focus(function(){
$("#ttest").val("#S_switch");
});

}).mouseout(function(){
//alert("#S_switch out");
//SlowDiv2("testTable","show");
});

$("#testTable").mouseleave(function(){

// $("#ttest").val("table out");
SlowDiv2("testTable","hide");
}).mouseover(function(){

});
$("#testTable tr").mouseleave(function(){
//alert("tr out");
}).mouseover(function(){
//alert("tr over");
});
$("#testTable tr").css("background-color","pink");
});

</SCRIPT>

</HEAD>

<BODY>

<p id="S_switch" style="width:20px;background-color:gray;float:left;text-align:center;">
<b> >> </b>
</p>


<div style="width:302;height:200px;background-color:pink;display:none;" id="testTable" >
<div style="background-color:#123abc;width:100%">123213</div>

saf师大<br/>
1<br/>
1<br/>
</div>

</BODY>
</HTML>

已赞过 已踩过<

评论收起

揭扰龙晨Nb
2011-05-06 · TA获得超过484个赞

知道小有建树答主

回答量：1294

采纳率：0%

帮助的人：655万

我也去答题访问个人页

关注

展开全部

.....这个....不用js的做法还真没听说过

已赞过 已踩过<

评论收起

1条折叠回答

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

只用div+css不用js，怎么实现，点击一个div link显示另一个原本（display为none的div)

其他类似问题

为你推荐：