[script]

$(function() {
$(".btn").on('click',function(){
Tmp=$(this).attr('id').replace('button','p');
$(".box").hide();
$("#"+Tmp).show();
});
});


[css]

.box{
display:none;
}


[html]

<p id="p1" class="box">テスト１</p>
<p id="p2" class="box">テスト2</p>
<p id="p3" class="box">テスト3</p>
<input type="button" id="button1" value="ボタン1" class="btn" />
<input type="button" id="button2" value="ボタン2" class="btn" />
<input type="button" id="button3" value="ボタン3" class="btn" />

上記のコードのボタン部分、表示部分を変えたいのですがうまくいかないので教ええてください。


<input type="button" id="button1" value="ボタン1" class="btn" />ここの部分を<p id="tab1 class="tab">に変更し、
<p id="p1" class="box">テスト１</p>　ここの部分を
<div class="">(cssでアイテム（ul）全体を右に寄せています。)
<ul>
<a href="/"><li><img src="hoge/hoge1.png"><p>hogehoge</p></li></a>
<a href="/"><li><img src="hoge/hoge2.png"><p>hoge</p></li></a>
</ul>
</div>

よろしくお願いします。