console
$(function(){
var eaFn = {
index:0,
popShow:function(index){
eaFn.index = index;
$('.pop-'+eaFn.index).addClass('curr').siblings('.pop').removeClass('curr');
}
};
$('.btn').on('click',function(){
var index = $(this).attr('data');
console.log(index);
eaFn.popShow(index);
});
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div class="btn_all">
<input type="button" data="1" value="btn1" class="btn" />
<input type="button" data="2" value="btn2" class="btn" />
<input type="button" data="3" value="btn3" class="btn"/>
<input type="button" data="4" value="btn4" class="btn"/>
<input type="button" data="5" value="btn5" class="btn" />
<input type="button" data="6" value="btn6" class="btn"/>
<input type="button" data="7" value="btn7" class="btn" />
<input type="button" data="8" value="btn8" class="btn" />
</div>
<div class="pop_all">
<div class="pop pop-1 curr">1</div>
<div class="pop pop-2">2</div>
<div class="pop pop-3">3</div>
<div class="pop pop-4">4</div>
<div class="pop pop-5">5</div>
<div class="pop pop-6">6</div>
<div class="pop pop-7">7</div>
<div class="pop pop-8">8</div>
</div>
</body>
</html>
.pop{
float: left;
width: 100px;
height: 100px;
border: 1px solid red;
display:none;
}
.curr{
display:block;
}