A więc tak...
1.
Pobierz plik:
http://www.sendspace.pl/file/d9676b1f4e4bbf64cb2a7dd
2.
Umieść pliki za pomocą klienta FTP na hostingu w głównym katalogu
3.
Wklej
<script type="text/javascript" src="usertabs.js">
/***********************************************
* Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
do szablonu headerinclude (na samym dole)
4.
Stwórz nowy arkusz .css w swoim stylu:
usertabs.css
z zawartością:
.usertabs {
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
list-style-type: none;
text-align: left;
font-size: 11px;
}
.usertabs ul {
margin: 0;
padding: 0;
}
.usertabs li {
display: inline;
margin: 0;
}
.usertabs li a {
background: #B4C1D3;
color: #2d2d2d;
position: relative;
z-index: 1;
border: 1px solid #939FAE;
border-bottom: 0;
padding: 8px;
text-decoration: none;
}
.usertabs li a:visited {
color: #2d2d2d;
text-decoration: none;
}
.usertabs li a:hover {
color: #2d2d2d;
text-decoration: none;
}
.usertabs li a.selected {
background: #303B4A;
color: #fff;
border-color: #262D35;
}
.usertabs li a.selected:hover {
text-decoration: none;
}
.tabcontent {
background: #cacaca;
display: none;
padding: 5px;
border: 1px solid #999;
margin-top: 7px;
}
.box-thing {
background: #f7f7f7;
border: 1px solid #8e8e8e;
padding: 8px;
}
@
media print {
.tabcontent {
display:block !important;
}
}
5.
Teraz owe zakładki na nowej stronie tworzysz w ten sposób:
<div id="usertabs" class="usertabs">
<ul>
<li><a href="#" rel="1" class="selected">Tytuł 1</a></li>
<li><a href="#" rel="2">Tytuł 2</a></li>
<li><a href="#" rel="3">Tytuł 3</a></li>
</ul>
</div>
<div id="1" class="tabcontent">
<div class="box-thing">
Zawartość
</div
</div>
<div id="2" class="tabcontent">
<div class="box-thing">
Zawartość
</div>
</div>
<div id="3" class="tabcontent">
<div class="box-thing">
Zawartość
</div>
</div>
<script type="text/javascript">
var mypets=new ddtabcontent("usertabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(0)
</script>
