HTMLでタブ付きビューを作成するにはどうすればよいですか?
-
06-07-2019 - |
質問
タブAをクリックすると、タブAのコンテンツが表示されます。タブBをクリックし、タブBのコンテンツを表示します。
HTMLスニペットを作成する最も簡単で互換性のある方法は何ですか?
ここではライブラリを使用するつもりはないので、 jQuery または他のライブラリ。
解決
独自のタブコントロールをロールしたい場合は、次のようなことができます:
<html>
<head>
<script type="text/javascript">
function activateTab(pageId) {
var tabCtrl = document.getElementById('tabCtrl');
var pageToActivate = document.getElementById(pageId);
for (var i = 0; i < tabCtrl.childNodes.length; i++) {
var node = tabCtrl.childNodes[i];
if (node.nodeType == 1) { /* Element */
node.style.display = (node == pageToActivate) ? 'block' : 'none';
}
}
}
</script>
</head>
<body>
<ul>
<li>
<a href="javascript:activateTab('page1')">Tab 1</a>
</li>
<li>
<a href="javascript:activateTab('page2')">Tab 2</a>
</li>
...
</ul>
<div id="tabCtrl">
<div id="page1" style="display: block;">Page 1</div>
<div id="page2" style="display: none;">Page 2</div>
...
</div>
</body>
</html>
他のヒント
リストさまざまな種類のタブ に加えて、タブの作成方法に関するチュートリアル
TabTastic は良いガイドです<!>#8212;アクセス可能であり、(JavaScriptが利用できない場合)非常に優雅に失敗します。
独自のタブビューを実装する場合は、次のようにします。
<html>
<head>
<style>
.tab {
display:none;
}
</style>
<script type="text/javascript">
function initTabView(){
var x = document.getElementsByClassName('tab-view')
for(var i=0; i < x.length; i++) {
x[i].onclick = displayTab;
}
var prevViewedTab = null;
function displayTab(e) {
var idOfTabToDisplay = this.getAttribute("data-tab")
if(prevViewedTab) {
prevViewedTab.style.display = 'none';
}
var tabToDisplay = document.getElementById(idOfTabToDisplay);
tabToDisplay.style.display = 'block';
prevViewedTab = tabToDisplay;
}
var defaultTab = document.getElementsByClassName('default-tab')
if (defaultTab.length) {
defaultTab[0].style.display = 'block';
prevViewedTab = defaultTab[0];
}
}
</script>
</head>
<body>
<ul>
<li>
<a data-tab="tab1" class="tab-view">Tab 1</a>
</li>
<li>
<a data-tab="tab2" class="tab-view">Tab 2</a>
</li>
<li>
<a data-tab="tab3" class="tab-view">Tab 3</a>
</li>
<li>
<a data-tab="tab4" class="tab-view">Tab 4</a>
</li>
</ul>
<div id="tabCtrl">
<div class="tab default-tab" id="tab1">This is Tab 1</div>
<div class="tab" id="tab2">This is Tab 2</div>
<div class="tab" id="tab3">This is Tab 3</div>
<div class="tab" id="tab4">This is Tab 4</div>
</div>
<script>
initTabView();
</script>
</body>
</html>
this などの例を見てください( 「タブ付きビューjavascript」のGoogle検索)。
これを少しカスタマイズして使用することもできますが、それを分解して、何をしているのかを判断することは有益です。基本的には、<div>
スタイルを使用してdisplay
を有効または無効にし、block
またはnone
<!> quot;シンプルかつ互換性のある<!> quotの場合;唯一の2つの基準です。 jQuery UIタブプラグインをお勧めします。クロスブラウザ、および実装する簡単。
野心に応じて、単に順序付けられていないリストと多数の<div>
s(タブの内容)の問題である可能性があります。次に、単純なJavaScriptで、getElementById()
を使用して、すべてのnone
sの表示プロパティを設定できます。現在の例外を除くすべての<=>。
または、これをご覧ください。
編集:jQueryサイトにリンクしているのは1つだけではなく、:)
jQuery UI のタブウィジェットは簡単に使用できます: http://jqueryui.com/demos/tabs/ 。
jQueryタブウィジェットはブラウザ側で完全に機能します。すべてのタブのコンテンツはリクエストごとに送信されます。または、Ajaxを使用してタブのコンテンツを動的に読み込むJavaScriptコードを記述できます。
しかし、それはあなたの使用には適切でないかもしれません。サーバー側でタブを制御する必要があるかどうかを検討します(つまり、タブをクリックすると、新しいページリクエストがサーバーに送信されます。サーバーは、タブの外観を持つHTMLを構築します)。
JavaScriptを使用している場合、 jQueryのタブは非常に便利です。
>