display:none;を使わないタブtab

タブの中にスライダーを入れようとしたら、display:none;で、１回消されちゃってるから、タブを切り替えた後にスクリプトがうまく動かない。

あああああああああああ・・・


＊解決方法＊
opactyをつかって表示切り替えする。

しかし、、、
float:left;で横に表示してmargin-leftを調節しようとしたら、タブによってheightが違うから、変な空白が生まれてしまう。。。


うわぁぁぁぁぁぁぁ>□<。。。

＊解決方法②＊
position:absolute;を使う。

あと、表示がうまくいかない場合は、z-indexを使えばいい。


ではでは、ちょー簡単なテストスクリプト。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.redTab').click(function(){
$('.xnoneTab div').removeClass('active');
$('#red').addClass('active');
});
$('.blueTab').click(function(){
$('.xnoneTab div').removeClass('active');
$('#blue').addClass('active');
});
$('.greenTab').click(function(){
$('.xnoneTab div').removeClass('active');
$('#green').addClass('active');
});
$('.orangeTab').click(function(){
$('.xnoneTab div').removeClass('active');
$('#orange').addClass('active');
});
});
</script>
</head>
<body>
<style>
ul{
list-style:none;
padding: 0;
margin: 0;
}
li{
float: left;
width: 80px;
height: 24px;
}
li:hover{
cursor: pointer;
}
.xnoneTab {
position: relative;
margin-top: 24px;
}
.xnoneTab div{
clear: both;
width: 320px;
height:150px;
position: absolute;
opacity: 0;
}
.xnoneTab .active{
opacity: 1;
position:relative; 
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
.orange{
background-color: orange;
}
#blue{
height: 300px;
}
#green{
height: 100px;
}
</style>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>

<ul>
<li class="red redTab">red</li>
<li class="blue blueTab">blue</li>
<li class="green greenTab">green</li>
<li class="orange orangeTab">orange</li>
</ul>
<div class="xnoneTab">
<div id="red" class="red active">redredredredredredredredredred</div>
<div id="blue" class="blue">blueblueblueblueblueblueblueblue</div>
<div id="green" class="green">greengreengreengreengreengreen</div>
<div id="orange" class="orange">orangeorangeorangeorangeorange</div>
</div>
</body>
</html>

こんな感じです♪

あーーーーーー
疲れたぁーーーーーーー