вопрос
Нужно сделать чтобы в табе открывались табы.
Я сделал так:
Код на сайте:
Код CSS:
Код JS:
но внутренние табы не открываются
Сайт
Я сделал так:
Код на сайте:
<div class="atabs">
<ul class="tabs">
[xfgiven_sub]<li><a rel="#atabs_sub" class="active" href="#">Субтитры</a></li>[/xfgiven_sub]
[xfgiven_ozv]<li><a rel="#atabs_ozv" href="#" class="">Озвучка</a></li>[/xfgiven_ozv]
[xfgiven_torrent]<li><a rel="#atabs_tor" href="#" class="">Торренты</a></li>[/xfgiven_torrent]
</ul>
<div class="atabs_content" id="atabs_content">
<div class="similarposts">Выберите.</div>
</div>
<div class="hidden" id="atabs_sub">
<div class="sub">[xfvalue_sub]</div>
</div>
<div class="hidden" id="atabs_ozv">
<div class="ozv">
<ul class="tabs">
[xfgiven_ozv_name]<li><a rel="#atabs_ozv_1" href="#" class="active">[xfvalue_ozv_name]</a></li>[/xfgiven_ozv_name]
[xfgiven_ozv_2_name]<li><a rel="#atabs_ozv_2" href="#" class="">[xfvalue_ozv_2_name]</a></li>[/xfgiven_ozv_2_name]
[xfgiven_ozv_3_name]<li><a rel="#atabs_ozv_3" href="#" class="">[xfvalue_ozv_3_name]</a></li>[/xfgiven_ozv_3_name]
[xfgiven_ozv_4_name]<li><a rel="#atabs_ozv_4" href="#" class="">[xfvalue_ozv_4_name]</a></li>[/xfgiven_ozv_4_name]
[xfgiven_ozv_5_name]<li><a rel="#atabs_ozv_5" href="#" class="">[xfvalue_ozv_5_name]</a></li>[/xfgiven_ozv_5_name]
</ul>
<div class="atabs_content" id="atabs_content">
<div class="similarposts">[xfvalue_ozv]</div>
</div>
<div class="hidden" id="atabs_ozv_1">
<div class="sub">[xfvalue_ozv]</div>
</div>
<div class="hidden" id="atabs_ozv_2">
<div class="sub">[xfvalue_ozv_2]</div>
</div>
<div class="hidden" id="atabs_ozv_3">
<div class="sub">[xfvalue_ozv_3]</div>
</div>
<div class="hidden" id="atabs_ozv_4">
<div class="sub">[xfvalue_ozv_4]</div>
</div>
<div class="hidden" id="atabs_ozv_5">
<div class="sub">[xfvalue_ozv_5]</div>
</div>
</div>
</div>
<div class="hidden" id="atabs_tor">
<div class="tor">[xfvalue_torrent]</div>
</div>
</div>
Код CSS:
.hidden {
display:none;
}
.atabs {
margin-top:10px;
min-height:34px;
clear:both;
}
.atabs .tabs {
height:34px;
}
.atabs .tabs li {
float:left;
margin-right:1px;
list-style:none;
}
.atabs .tabs li a {
display:block;
height:32px;
line-height:34px;
padding:0 15px;
font-weight:bold;
outline:none;
color:#ccc;
background:url(../img/tabs/articles_atabs_bg.gif) repeat-x bottom;
}
.atabs .tabs li a.active {
background:url(../img/tabs/articles_atabs_bg_active.gif) repeat-x bottom;
color:#fff;
}
.atabs .atabs_content {
}
.atabs .sub {
padding:10px;
text-align:center;
}
.atabs .sub li {
list-style:none;
padding:5px;
font-weight:bold;
}
.atabs .ozv {
padding:10px;
text-align:center;
}
.atabs .ozv a {
font-weight:bold;
color:#ff7800;
}
.atabs .ozv .ozv_1 {
padding:10px;
text-align:center;
}
.atabs .ozv .ozv_1 a {
font-weight:bold;
color:#ff7800;
}
.atabs .ozv .ozv_2 {
padding:10px;
text-align:center;
}
.atabs .ozv .ozv_2 a {
font-weight:bold;
color:#ff7800;
}
.atabs .ozv .ozv_3 {
padding:10px;
text-align:center;
}
.atabs .ozv .ozv_3 a {
font-weight:bold;
color:#ff7800;
}
.atabs .ozv .ozv_4 {
padding:10px;
text-align:center;
}
.atabs .ozv .ozv_4 a {
font-weight:bold;
color:#ff7800;
}
.atabs .ozv .ozv_5 {
padding:10px;
text-align:center;
}
.atabs .ozv .ozv_5 a {
font-weight:bold;
color:#ff7800;
}
.atabs .tor {
padding:18px;
text-align:center;
}
.atabs .tor a {
display:inline-block;
padding-left:15px;
margin:0 5px;
color:#4fc4e3;
}
Код JS:
jQuery.noConflict();
// Document Ready Event
jQuery(document).ready(function(){
// Add dropdown class to links that have dropdowns
jQuery('.menu > li > ul, .submenu > li > ul').each(function(i,li) {
jQuery(li).parent('li').addClass('dropdown');
});
// Add dropdown class to links that have dropdowns
jQuery('.menu > li > ul, .submenu > li > ul').each(function(i,li) {
jQuery(li).parent('li').addClass('dropdown');
});
// Drop down menus - level 2
jQuery(".menu > li,.submenu > li").hover(
function(){
var menu = jQuery(this).children(':parent > ul');
var offset = jQuery(this).offset();
var bodywidth = jQuery('body').width();
// Check to make sure the dropdown won't go off screen
if(offset.left + 189 > bodywidth) {
menu.css({
left: 'auto',
right: '0px'
});
}
menu.css({visibility: "visible",display: "none"}).slideDown(268);
// menu.slideDown(268);
},
function() {
var menu = jQuery(this).children(':parent > ul');
menu.css({visibility: "hidden"});
});
// Drop down menus - level 3
jQuery(".menu > li > ul > li, .submenu > li > ul > li").hover(
function(){
var menu = jQuery(this).children(':parent > ul');
var offset = jQuery(this).offset();
var bodywidth = jQuery('body').width();
// Check to make sure the dropdown won't go off screen
if(offset.left + 378 > bodywidth) {
menu.css({
left: '-189px'
});
}
// menu.slideDown(268);
menu.css({visibility: "visible",display: "none"}).slideDown(268)
},
function() {
var menu = jQuery(this).children(':parent > ul');
menu.css({visibility: "hidden"});
});
// Featured Slide Thing
var items = jQuery('.featured li');
var item_width = 630;
var max_margin = items.length * item_width - item_width;
var animstatus = false;
var user_click = false;
var animation_speed = 1000;
var auto_speed = 7500;
jQuery('.featured .fthumbs a').each(function(i,link) {
var index = i+1;
jQuery(link).click(function(e) {
e.preventDefault();
user_click = true;
moveFeature(index);
});
});
function moveFeature(location) {
if(animstatus == false) {
animstatus = true;
var feature = jQuery('.featured ul');
var pos = parseInt(jQuery(feature).css('left'));
if(location) {
if(location=='next') {
if(pos == -max_margin){
left = 0;
}
else {
left = pos-item_width;
}
}
else if(location=='back') {
if(pos == 0){
left = -max_margin;
}
else {
left = pos+item_width;
}
}
else {
left = -(item_width*location)+item_width;
}
var item = Math.abs(left/item_width);
jQuery('.featured .fthumbs a img').removeClass('active');
jQuery('.featured .fthumbs a:eq('+item+') img').addClass('active');
feature.animate({left: left},animation_speed,"swing",function() {
animstatus = false;
});
}
}
}
function feature_automove() {
if(user_click == true) {
user_click = false;
}
else {
moveFeature('next');
}
}
var feature_auto = setInterval(feature_automove, auto_speed);
// cookie functions http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name)
{
createCookie(name,"",-1);
}
// /cookie functions
/**
* Styleswitch stylesheet switcher built on jQuery
* Under an Attribution, Share Alike License
* By Kelvin Luck ( http://www.kelvinluck.com/ )
**/
jQuery(document).ready(function() {
jQuery('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
});
function switchStylestyle(styleName)
{
jQuery('link[@rel*=style][title]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
createCookie('style', styleName, 365);
}
jQuery(".tabs a").each(function(i) {
jQuery(this).click(function(e){
e.preventDefault();
jQuery(".tabs a").removeClass('active');
jQuery(this).addClass('active');
jQuery('#atabs_content').empty().html(jQuery(this.getAttribute("rel")).html());
});
});
});
function bookmark(url, title){
if (window.sidebar) // firefox
window.sidebar.addPanel(title, url, "");
else if(window.opera && window.print){ // opera
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click();
}
else if(document.all) // ie
window.external.AddFavorite(url, title);
else
alert('Your browser does not support this function.');
}
но внутренние табы не открываются
Сайт