私は2つのアプローチを使用してこれを達成しようとしました:
アプローチ #1: Javascript/jQuery
ユーザーがタブのコンテンツまたはタブをクリックすると、呼び出したときに「アクティブな」タブを閉じる機能を追加しました。基本的に、これは、ユーザーがタブをクリックするたびに、タブの下部の位置を切り替えて、(上下にスライドすることによって) 表示/非表示を切り替えるだけです。これがそのライブデモです。追加機能を探していない場合は、このフィドルで十分です
機能が強化されたバージョンの関連コードは次のとおりです。
<script> // The most important section for you
$('.tab').click(function (e) {
e.stopPropagation(); // allows the :not to function in the next .click function
var toggleBot = $(this).css('bottom') == "400px" ? "0px" : "400px";
// ^^ Clever way of toggling between two values
$(this).animate({
'bottom': toggleBot // Toggle the value
});
var number = $(this).attr('class').split(' ')[1]; // Get the number to relate to the content
if ($('.active')[0] && number != $('.active').attr('class').split(' ')[1]) {
// This part makes only one content stay open at a time
var number2 = $('.active').attr('class').split(' ')[1];
var toggleBot2 = $('.tab.' + number2).css('bottom') == "0px" ? "400px" : "0px";
$('.tab.' + number2).animate({
'bottom': toggleBot2
});
$('.content.' + number2).slideToggle().toggleClass('active');
}
$('.content.' + number).slideToggle().toggleClass('active');
});
$('.content').click(function(e) { // Again, allows the :not to function correctly below
e.stopPropagation();
});
$('body:not(.tab, .content)').click(function() {
// Allows the 'active' tab to be closed when the anything but a tab/content is clicked
var number2 = $('.active').attr('class').split(' ')[1];
$('.tab.' + number2).animate({
'bottom': '0'
});
$('.content.' + number2).slideToggle().toggleClass('active');
});
</script>
<style>
div {
text-align:center;
}
.tab {
width: 100px;
height: 50px;
border-radius: 10px 10px 0px 0px;
position: absolute; /* !!Important for functionality of tab!! */
bottom: 0px; /* !!Important for functionality of tab!! */
z-index:2;
}
.tab.one {
background: red;
left:10%;
}
.tab.two {
background: blue;
left:30%;
}
.tab.three {
background: yellow;
left:50%;
}
.tab.four {
background:green;
left:70%;
}
.content {
border-radius: 10px 10px 0px 0px;
position:absolute; /* !!Important for functionality of content!! */
display:none; /* !!Important for functionality of content!! */
bottom:0; /* !!Important for functionality of content!! */
left:0px;
background:black;
color:white;
height:400px;
width:100%;
z-index:1;
}
/* Just to add some content */
#mainContent {
position:relative;
width:25%;
height:75%;
clear:both;
}
</style>
<html> <!-- Note: they are all on the same level -->
<body>
<div id='#mainContent' style='position:relative; width:75%; height:75%; left:12.5%;'>Zombie ipsum content</div>
<div class='tab one'>Tab 1</div>
<div class='content one'>Content 1!</div>
<div class='tab two'>Tab 2</div>
<div class='content two'>Content 2!</div>
<div class='tab three'>Tab 3</div>
<div class='content three'>Content 3!</div>
<div class='tab four'>Tab 4</div>
<div class='content four'>Content 4!</div>
</body>
</html>
アプローチ #2: CSS
<input>s とsに基づく CSS で幅/高さを切り替える前に<label>。今回はCSSだけで同じタブを作ってみようということになったので、ここで試してみます。基本的に、タブの周りにリンクを配置し、クリックするとアニメーション化し、クリックするとコンテンツの高さもアニメーション化します。完了するのに手間がかからず、私は常に完全な CSS プロジェクトが大好きです <3 しかし、このアプローチは jQuery アプローチと同じ機能をまったく達成していません。 in '機能メモ'
CSS のみのアプローチに関連するコードは次のとおりです。
//No javascript, Yay!
<style>
div {
text-align:center;
}
.tab {
width: 100px;
height: 50px;
text-align:center;
border-radius: 10px 10px 0px 0px;
color:black;
position: absolute;
bottom: 0px;
z-index:2;
}
.tab.one {
background: red;
left:10%;
}
.tab.two {
background: blue;
left:30%;
}
.tab.three {
background: yellow;
left:50%;
}
.tab.four {
background:green;
left:70%;
}
#mainContent {
position:relative;
width:25%;
height:75%;
clear:both;
}
#wrapper { /* Allows the tabs to be at the bottom */
position:absolute;
bottom:0;
width:100%;
text-decoration: none;
}
.content {
border-radius: 10px 10px 0px 0px;
position:absolute;
bottom:0;
left:0px;
background:black;
color:white;
height:0px;
width:100%;
z-index:1;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
}
.hideUp {
display:block;
position:relative;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
}
.hideUp:focus {
bottom: 400px;
}
.hideUp:focus + .content {
height:400px;
}
</style>
<html>
<body>
<div id='#mainContent' style='position:relative; width:75%; height:75%; left:12.5%;'>Zombie ipsum content.</div>
<div id='wrapper'>
<a href="#" tabindex="-1" class="hideUp"> <!-- Allows the CSS to know whether the tab has focus or not -->
<div class="tab one">Tab 1</div>
</a>
<div class="content">Content 1</div>
<a href="#" tabindex="-1" class="hideUp">
<div class="tab two">Tab 2</div>
</a>
<div class="content">Content 2</div>
<a href="#" tabindex="-1" class="hideUp">
<div class="tab three">Tab 3</div>
</a>
<div class="content">Content 3</div>
<a href="#" tabindex="-1" class="hideUp">
<div class="tab four">Tab 4</div>
</a>
<div class="content">Content 4</div>
</div>
</body>
</head>
使用上の注意: jQuery アプローチではデバイスが jQuery を実行できる必要があり (もちろん)、CSS アプローチではユーザーが CSS3 トランジションを許可する「最新の」ブラウザーを使用している必要があります。CSS にすべてのブラウザ タグを含めたわけではなく、webkit、mozilla、および IE のタグだけを含めました。
機能に関する注意:私が使用した CSS アプローチでは、ユーザーはタブをクリックしてコンテンツを「閉じる」ことができず、他の場所をクリックする必要があります。また、コンテンツがクリックされたときにタブを閉じることもできるため、回避策が見つからない限り、画像やテキストなどの静的コンテンツを表示する場合にのみ機能します.
コンテンツを選択できるように、checkbox-hackを使用して、タブ自体がクリックされたときにのみ CSS デモを開閉するように変更できます。
その一部についてさらに説明が必要な場合は、お知らせください。お役に立てば幸いです！