Witam wszystkich,
Próbuje zrobić proste zakładki i chciałbym trzymać się wytycznych W3C oraz zasady czystego kodu. Zakładki mają być banalne. W pozycji horyzontalnej mają być np. 3 zakładki, które po kliknięciu pokaż mi zawartość poszczególnych zakładek, bez konieczności przeładowania całej strony i dołączania kolejnych plików html.
Na czym polega problem. Otóż mam 3 warianty.
Wariant najbardziej pożądany (nie działa):
http://kursjs.pl/kurs/jquery/tabs.php
Zakładki pojawiają się ale po kliknięciu nic się nie dzieje. Problem leży chyba w dołączonych bibliotek ale nie udało mi się odnaleźć przyczynę.
Wariant 2 (działa ale poszczególne zakładki mają animowane najazdy a ja chce najzwyklejsze Show i Hide - modyfikacja kodu JS nie udała mi się):
<div id="tabbed_box_1" class="tabbed_box"><h1>Zakładki z jQuery<small>demo</small></h1><div class="tabbed_area"><ul class="tabs"><li><a href="#" title="content_1" class="tab active">Najnowsze</a></li><li><a href="#" title="content_2" class="tab">Kategorie</a></li><li><a href="#" title="content_3" class="tab">Archiwalne</a></li></ul><div id="content_1" class="content"><ul><li><a href="#">Anglia: Szczęsny szybko pokonany</a></li></ul></div><div id="content_2" class="content"><ul><li><a href="#">Sport<small>6 Postów</small></a></li></ul></div><div id="content_3" class="content"><ul><li><a href="#">Grudzień 2013<small>6 Postów</small></a></li></ul></div></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>
$(document).ready(function(){
// Klikniecie w klase tab
$("a.tab").click(function () {
// usuniecie klasy active
$(".active").removeClass("active");
// dodanie klasy active do kliknietego taba
$(this).addClass("active");
// rozwiniecie tresci
$(".content").slideUp();
// dodanie atrybutu title do klikietego taba.
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script> .a{color:#333;
font-weight:normal;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
position:relative;
text-decoration:none;
text-align:center;
padding-top:10px;
display:block;}
.a:hover{text-decoration:underline;}
#tabbed_box_1{
margin:0px auto 0px auto;
width:300px;
}
.tabbed_box h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:23px;
color:#858585;
letter-spacing:-1px;
margin-bottom:10px;
}
.tabbed_box h1 small {
color:#e3e9ec;
font-weight:normal;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
position:relative;
top:-4px;
left:6px;
letter-spacing:0px;
}
.tabbed_area {
border:1px solid #494e52;
background-color:#333;
padding:8px;
}
ul.tabs {
margin:0px; padding:0px;
}
ul.tabs li {
list-style:none;
display:inline;
}
ul.tabs li a {
background-color:#eee;
color:#333;
padding:8px 11px 8px 12px;
text-decoration:none;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:1px solid #464c54;
}
ul.tabs li a:hover {
background-color:#eed;
border-color:#2f343a;
}
ul.tabs li a.active {
background-color:#eee;
color:red;
border-top:1px solid red;
border:3px solid #eee;
}
.content {
background-color:#ffffff;
padding:10px;
border:1px solid #eee;
border-top:0;
}
#content_2, #content_3 { display:none; }
ul.tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
.content ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.content ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li a {
text-decoration:none;
color:#333;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.content ul li a:hover{
text-decoration:underline;
}
.content ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.content ul li:last-child {
border-bottom:none;
}
ul.tabs li a {
background:#999;
}
ul.tabs li a.active {
background:#eee;
}
.content {
background:#eee;
} Wariant 3 (działa nawet tak jak bym chciał ale został wygenerowany w generatorze i jest wielka biblią - na pewno da się to zrobić prościej i bardziej optymalnie niż ponad 100 linijek kodu).
Kodu nie wklejam, bo developer płakał jak sprawdzał.
Proszę o pomoc i z góry dziękuje za wszelkie wskazówki.