如何用JS或JQ实现点击不同的按钮出现不同的层内容
1个回答
展开全部
代码这样呀：
<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>
因为span1的display原始属性是block，所以打开页面会显示span1的内容。选择不同单选按钮时，会调用不同的js方法，改变各个span的display值，来控制显示不同的内容。
<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>
因为span1的display原始属性是block，所以打开页面会显示span1的内容。选择不同单选按钮时，会调用不同的js方法，改变各个span的display值，来控制显示不同的内容。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
