Po kliknięciu na zakładkę A wyświetl zawartość dla karty A. Kliknij kartę B, pokaż zawartość dla karty B itd.Jak utworzyć widok z kartami w HTML?
Jaki jest najprostszy i kompatybilny sposób tworzenia fragmentu kodu HTML?
Nie mam zamiaru używać żadnych bibliotek tutaj, więc żadna z jQuery lub innych bibliotek.
Jeśli chcesz toczyć własną kontrolę kartę, można zrobić coś takiego:
<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>
Widżet zakładek w jQuery UI jest łatwy w użyciu: http://jqueryui.com/demos/tabs/.
Widget zakładki jQuery działa całkowicie po stronie przeglądarki - zawartość dla wszystkich kart jest wysyłana przy każdym żądaniu lub można napisać kod JavaScript, który używa Ajax do dynamicznego ładowania zawartości karty.
Ale może nie być odpowiedni do Twojego użytku. Zastanów się, czy potrzebujesz kontrolować zakładki po stronie serwera (to znaczy kliknięcie na karcie powoduje wysłanie nowego żądania strony do serwera - serwer tworzy HTML, który ma wygląd kart).
muszę wdrożyć go bez bibliotekami :( – omg
Jeśli jesteś otwarty na używanie JavaScript, jQuery's tab jest całkiem niezły.
Link jest uszkodzony. –
Spójrz na przykład, taki jak this (dzięki uprzejmości wyszukiwarki Google dla "widoku z zakładkami javascript").
Można oczywiście użyć tego przy niewielkiej personalizacji, ale pouczające jest rozłożenie go na części i określenie, co robi. Jest to w zasadzie włączania lub wyłączania <div> używając stylu display i ustawienie go na block lub none
Jeśli „proste i zgodne” są to jedyne dwa kryteria, chciałbym zaproponować jQuery UI Tabs plugin. Cross-browser i cinch do implementacji.
muszę wdrożyć go bez bibliotekami :( – omg
W zależności od Twoich ambicji, może to być po prostu kwestia nieuporządkowanej listy i liczby <div> s (zawartość karty). Wtedy prosty JavaScript może - za pomocą getElementById() - ustawić właściwość wyświetlania dla wszystkich <div> s: none dla wszystkich oprócz bieżącego.
Można również rzucić okiem na this.
Edit: Nie tylko jeden link do strony jQuery wydaje :)
Oto list of different types of tabs plus tutoriale, w jaki sposób budować je
Jeśli chcesz zaimplementować własną kartę Widok, po prostu zrób to tak:
<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>
Dziękujemy, wydaje 9,1,3 są wszystkie możliwe wartości nodeType, prawda? – omg
Według http://www.w3.org/TR/2000/WD-DOM- Poziom-1-20000929/level-one-core.html # ID-1950641247, istnieje 12 możliwości. Sprawdzanie 1 głównie uniemożliwia nam uzyskanie atrybutu i węzłów tekstowych, które mogą należeć do div strony karty. – Jacob