如何用JS或JQ实现点击不同的按钮出现不同的层内容？

qtvb1987 2009-12-09 06:07:29

问题就是在一个页面，同进出现很多个标题，当点击不同的标题时，其他标题下面的内容就隐藏。

这个如何实现呀？

...全文

680 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

qtvb1987 2009-12-10

打赏
举报

代码这样呀：

<html>
<head>
<script>
$(document).ready(function() {
/********* tab setting *********/
$(".tab td:first").addClass("current");
$(".tab div:not(:first)").hide();

/********* tab event *********/
$(".tab td").click(function() {
$(".tab td").removeClass("current");
$(this).addClass("current");
$(".tab div").hide();
$("." + $(this).attr("id")).fadeIn('slow');
});

$("#linkFSS").click(function(){
$("#tab7").click();
});

});</script>
</head>
<body>

<div class="tab">
<table>
<tr>
<td id="tab1">租房</td>
<td id="tab2">学生宿舍</td>
</tr>
</table>
<div class="tab1">租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房
</div>
<div class="tab2">学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍
</div>
</div>
</body>
<html>

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(function()
{

$("div").css("display","none");
$("h1").click(function(){
var obj=$(this).next("div");
$(obj).show("fast");
$(obj).siblings("div").each(function(){$(this).hide();})
});
});

</script>

<style type="text/css">

#panel
{
border:1px;
border-color:green;
border-style:double;
background-color:#F0F8FF;
cursor:pointer;
width:100px;
height:100px;
}
</style>
</head>
<body>
<h1>gdgdg</h1>
<div id="1"><p>ffffffffsfsffffffffjsfojsofjsofjsofjs</p></div>
<h1>dgdgd</h1>
<div id="2"><p>afafa<br>fsfsfsfsfsfs</p></div>
<h1>hfhfhf</h1>
<div id="3"><p>fffsfsfssssssssssssssssssssssssssssssssssfffffffff</p></div>
</body>
</html>

qtvb1987 2009-12-10

打赏
举报

先说谢谢各位啦？

可是我试了没有效果呀，点击标题下面的内容都没有反应。JQ对不？

teerhu 2009-12-09

打赏
举报

<html>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>



<script type="text/javascript">

$(function()

{



$("div").css("display","none");

$("h1").click(function(){

	var obj=$(this).next("div");	

	$(obj).show("fast");

	$(obj).siblings("div").each(function(){$(this).hide();})

	});		 

});



</script>



<style type="text/css">



#panel

{

border:1px;

border-color:green;

border-style:double;

background-color:#F0F8FF;

cursor:pointer;

width:100px;

height:100px;

}

</style>

<h1>gdgdg</h1>

<div id="1"><p>ffffffffsfsffffffffjsfojsofjsofjsofjs</p></div>

<h1>dgdgd</h1>

<div id="2"><p>afafa<br>fsfsfsfsfsfs</p></div>

<h1>hfhfhf</h1>

<div id="3"><p>fffsfsfssssssssssssssssssssssssssssssssssfffffffff</p></div>

</html>

mykelly6 2009-12-09

打赏
举报



<div class="tab">

	<table>

		<tr>

			<td id="tab1">租房</td>

			<td id="tab2">学生宿舍</td>

		</tr>

	</table>

	<div class="tab1">

	</div>

	<div class="tab2">

	</div>

</div>



$(document).ready(function() {

	/********* tab setting *********/

	$(".tab td:first").addClass("current");

    $(".tab div:not(:first)").hide();



	/********* tab event *********/

    $(".tab td").click(function() {

        $(".tab td").removeClass("current");

        $(this).addClass("current");

        $(".tab div").hide();

        $("." + $(this).attr("id")).fadeIn('slow');

   });



	$("#linkFSS").click(function(){

		$("#tab7").click();

	});



});

Click_Me 2009-12-09

打赏
举报



JQ 显示 .show() 隐藏.hide()

很简单的东西

分别使用js和jquery实现的点击出现弹出层效果，[removed]标签内为jq实现，若jq按钮点击无反应，请先引入jq文件。

jq实现点击图片弹出大图

jq放大图片查看，可以用键盘左右键切换图片，无缝衔接，弹窗式放大

jQuery浮动层点击图标按钮关闭或展开 jQuery浮动层点击图标按钮关闭或展开

jQuery点击图片弹出层显示文字是一款鼠标点击图片弹出焦点图跟文字描述特效代码。

JavaScript

87,994

社区成员

224,697

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章