点击按钮动态的显示适当的文本

来源：互联网发布：软件测试加班图片编辑：程序博客网时间：2024/06/06 18:03

<body>
<div class="btn_head">
<div class="btn fl" id="bookbtn">书籍</div>
<div class="btn fl" id="moviebtn">电影</div>
<div class="btn fl" id="musicbtn">音乐</div>
</div><br/>

<p id="book">书籍,是指装订成册的图书和文字，在狭义上的理解是带有文字和图像的纸张的集合。广义的书则是一切传播信息的媒体。不过有些人认为图书一词是“河图”与“洛书”的简称.</p>
<p id="movie">电影，是由活动照相术和幻灯放映术结合发展起来的一种连续的视频画面，是一门视觉和听觉的现代艺术，也是一门可以容纳悲喜剧与文学戏剧、摄影、绘画、音乐、舞蹈、文字、雕塑、建筑等多种艺术的现代科技与艺术的综合体。</p>
<p id="music">音乐是反映人类现实生活情感的一种艺术（英名称：music；法文名称： musique；意大利文：musica）。音乐可以分为声乐和器乐两大类型，又可以分为古典音乐、流行音乐、民族音乐、乡村音乐、原生态音乐等。</p>

<script type="text/javascript">
$().ready(function(){
$(".btn").mouseover(function(){
$(".btn").removeClass('btn_cur');
$(this).addClass('btn_cur');
});

$("#book").hide();
$("#movie").hide();
$("#music").hide();

$("#bookbtn").click(function(){
$("#book").show();
$("#movie").hide();
$("#music").hide();
});
$("#moviebtn").click(function(){
$("#book").hide();
$("#movie").show();
$("#music").hide();
});

$("#musicbtn").click(function(){
$("#book").hide();
$("#movie").hide();
$("#music").show();
});
});

</script>

0 0