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

JavaScript014

如何用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值,来控制显示不同的内容。

你有用jQuery吗。如果是可以用delegate代理点击事件。如果没有,自己写一个,其实就是点击事件的冒泡。

<button type="button" data-target="#div1">显示id为div1的元素里的内容</button>

<button type="button" data-target="#div2">显示id为div2的元素里的内容</button>

为你的每个要点击的按钮加上data-target属性(这是HTML5的data-*特性),假设这些按钮的共同父元素是

#button-wrap

那么就可以这样用代理

$('#button-wrap').delegate('button[data-target]', 'click', function() {

    // 获取存储在按钮上的作为 jQuery 选择器的 target 值

    var target = $(this).data('target') 

    // 在 HTML5 中也可以是 var target = this.dataset.target

    // 根据target指定的选择器,显示该元素

    $(target).show()

})

传入参数this,每个dom节点多有this

function c(self){

alert(self.id)

}

<input type='button' id='id1' onclick='c(this)'/> 这里传入this,代表当前input

<input type='button' id='id2' onclick='c(this)'/> 这里传入this,代表当前input