定義リストでタブパネル


Notice: Undefined index: plus_sharedcount_enabled in /usr/home/aa106acgzb/html/notebook/wp-content/plugins/simple-share-buttons-adder/php/class-buttons.php on line 670

Notice: Undefined index: bar_sharedcount_enabled in /usr/home/aa106acgzb/html/notebook/wp-content/plugins/simple-share-buttons-adder/php/class-buttons.php on line 672

jQueryを使ってタブパネルを作ってみる。

htmlは普通にdl,dt,ddを使ってあるものとします。

<script>
$(function(){
$(“dd:not(:first)”).css(“display”,”none”);
$(“dt:first”).addClass(“active”);
$(“dt”).click(function(){
if($(“+dd”,this).css(“display”)==”none”){
$(“dd”).css(“display”,”none”);
$(“+dd”,this).css(“display”,”block”)
$(“dt”).removeClass(“active”);
$(this).addClass(“active”);
};
})
})
</script>
<style>
dl {
width: 400px;
margin: auto;
position: relative;
}
dt {
width: 80px;
box-sizing: border-box;
height: 30px;
float: left;
border: solid 1px #999;
text-align: center;
line-height: 30px;
background-color: #ccc;
cursor: pointer;
}
dt.active {
background-color: #fff;
border-bottom-color: #fff;
}
dd {
margin: 0;
position: absolute;
left: 0;
top: 30px;
height: 200px;
width: 100%;
border: solid 1px #999;
border-top: none;
box-sizing: border-box;
padding: 10px
}
</style>

長々とあるけど、要点はddをposition:absoute;で同じ位置に配置するだけ。

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ WordPressへ にほんブログ村 IT技術ブログ Webサイト構築へ

投稿者: おーあえ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です