Заранее извиняюсь за такой огромный вопрос =)
На сайте стоит шаблон
(ссылка на шаблон). В нем очень удобно сделана навигация по сериям сериалов вот пример (
ссылка).Хотел вставить такую же в другой шаблон, и вот что вышло (серии выстраиваются сверху вниз, навигация не работает - при нажатии на цифру другой серии страница просто прокручивается вверх)
,
код в fullstory
| Код |
|---|
[xfgiven_1]
<div id="serial_tab" class="serial_tab">
<div class="serial_tab_top"></div>
<div class="serial_tab_input">
<a href="#" rel="seria1" class="selected"><span>1</span></a>
[xfgiven_2]<a href="#" rel="seria2"><span>2</span></a>[/xfgiven_2]
[xfgiven_3]<a href="#" rel="seria3"><span>3</span></a>[/xfgiven_3]
(... так до 30)
[xfgiven_30]<a href="#" rel="seria30"><span>30</span></a>[/xfgiven_30]
</div>
</div>
<div id="seria1" class="tabcontent">
<iframe title="Смотреть 1 серию {title} онлайн" width="656" height="407" src="[xfvalue_1]" frameborder="0"></iframe></center><div style="height:20px;width:100%;"></div>
<center><div id="border-bottom-news"></div></center>
</div>
[xfgiven_2]<div id="seria2" class="tabcontent">
<iframe title="Смотреть 1 серию {title} онлайн" width="656" height="407" src="[xfvalue_2]" frameborder="0"></iframe></center><div style="height:20px;width:100%;"></div>
<center><div id="border-bottom-news"></div></center>
</div>[/xfgiven_2]
[xfgiven_3]<div id="seria3" class="tabcontent">
<iframe title="Смотреть 1 серию {title} онлайн" width="656" height="407" src="[xfvalue_3]" frameborder="0"></iframe></center><div style="height:20px;width:100%;"></div>
<center><div id="border-bottom-news"></div></center>
</div>[/xfgiven_3]
(... так до 30)
[xfgiven_30]<div id="seria30" class="tabcontent">
<center><strong class="seria">Серия 30:</strong><br><br>
<iframe title="Смотреть 1 серию {title} онлайн" width="761" height="469" src="[xfvalue_30]" frameborder="0"></iframe></center><div style="height:20px;width:100%;"></div>
<center><div id="border-bottom-news"></div></center>
</div>[/xfgiven_30]
<script type="text/javascript">
var countries=new ddtabcontent("serial_tab")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
[/xfgiven_1]
|
все что я взял из рабочих стилей
| Код |
|---|
.serial_tab a {font:12px Verdana; color:#2c2c2c; padding:3px 5px 4px 5px; text-decoration:none; }
.serial_tab a:hover {color:#f3f3f3; background:#9c383a; border-radius:7px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); text-decoration:none;}
.serial_tab a.selected {font:12px Verdana; color:#f3f3f3; background:#2c2c2c; border-radius:7px; padding:3px 5px 4px 5px;}
.serial_tab {float:left; width:654px; border:1px solid #2c2c2c; margin-bottom:7px;}
.serial_tab_top {float:left; width:654px; height:22px; background:url(../images/serii.jpg) top left no-repeat;}
.serial_tab_input {padding:7px;}
.shadetabs {margin-left:10px;height:25px;width: 1000px; float:left;}
.shadetabs a.selected:hover { background-position:100% -25px; text-decoration: none;}
.shadetabs a.selected:hover span { background-position:0% -25px;} |
в рабочем шаблоне в папке со стилями есть еще файл tabcontent.css (ниже его код), его я также положил в папку со стилями.
| Код |
|---|
.shadetabs {margin-left:10px;height:25px;width: 1000px; float:left;}
.shadetabs a.selected {padding-left: 2px; display: block;float:left;font:12px Verdana; color:#2c2c2c; text-decoration: none; height: 25px; background:url(../images/fulltab_02.jpg) top right no-repeat;padding-right:48px;outline:none; }
.shadetabs a.selected span {display:block; line-height:15px; background:url(../images/fulltab_01.jpg) no-repeat;padding:4px 7px 6px 47px;}
.shadetabs a.selected:hover { background-position:100% -25px; text-decoration: none;}
.shadetabs a.selected:hover span { background-position:0% -25px;}
.shadetabs a {padding-left: 2px; display: block;float:left;font:12px Verdana; color:#2c2c2c; text-decoration: none; height: 25px; background:url(../images/fulltab_02.jpg) no-repeat 100% -25px;padding-right:48px;outline:none;margin:4px 0 0 0px;}
.shadetabs a span {display:block; line-height:15px; background:url(../images/fulltab_01.jpg) no-repeat 0% -25px;padding:4px 7px 6px 47px;}
.shadetabs a:hover { background:url(../images/fulltab_02.jpg) top right no-repeat; }
.shadetabs a:hover span {background:url(../images/fulltab_01.jpg) no-repeat;}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
|
Помогите пожалуйста, в чем может быть проблема?
