- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- <style>
- *{
- margin:0;
- padding:0;
- }
- .box{
- margin:50px;
- }
- .box div{
- display:none;
- width: 200px;
- height: 200px;
- border:1px solid black;
- }
- .onclick{
- background:red;
- }
- input{
- border:1px solid #666;
- padding:2px;
- }
- </style>
- </head>
- <body>
- <div class='box'>
- <input type="button" value='按钮1' class='onclick'/>
- <input type="button" value='按钮2' />
- <input type="button" value='按钮3' />
- <div style="display:block">1</div>
- <div>2</div>
- <div>3</div>
- </div>
- </body>
- <script>
- var ipt=document.getElementsByTagName('input');
- //获取所有的按钮标签
- var oDiv=document.getElementsByClassName('box')[0];
- //获取box标签
- var aDiv=oDiv.getElementsByTagName('div');
- //获取box下面的所有div标签
- for(var i=0;i<ipt.length;i++){
- //使用for循环 遍历所有的input按钮
- ipt[i].index=i;
- //定义索引为i;
- ipt[i].onclick=function(){
- //点击事件
- for(var j=0;j<ipt.length;j++){
- //清除所有的样式
- aDiv[j].style.display='none';
- ipt[j].className='';
- }
- //设置adiv的样式和input的背景样式
- aDiv[this.index].style.display='block';
- ipt[this.index].className='onclick';
- }
- }
- </script>
- </html>
补充 JQ 的做法:
- $(function(){
- $('.box').find('input').click(function(){
- $('.box').find('input').attr('class','');
- $(this).attr('class','onclick');
- $('.box').find('div').CSS('display','none');
- $('.box').find('div').eq($(this).index()).css('display','block');
- });
- });
来源: http://www.jb51.net/article/114500.htm