留言板

AUI Tabs in LifeRay Template - For Loop

Venkatesh Bhagavath,修改在7 年前。

AUI Tabs in LifeRay Template - For Loop

New Member 发布: 1 加入日期: 16-10-3 最近的帖子
Hi,

Need help w.r.t rendering tabs in web content display.
I have a 3 tab content, which is shown inside a for loop based on some conditions.
It so happens that in the first iteration, the tab renders properly, In the next iteration all the tab contents (some content1,2 and 3)appears at the first tab itself and the other two become un-responsive.

I feel the issue is with the div id of the tab getting repeated
for(;;;)
<div id="myTab">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab-1">tab1</a></li>
<li><a href="#tab-2">tab2</a></li>
<li><a href="#tab-3">tab3</a></li>
</ul>
<div class="tab-content">
<div id="tab-1">
some content1
</div>
<div id="tab-2">
somecontent2
</div>
<div id="tab-3">
somcontent3;
</div>
</div>
</div>
#end
and my script content is a as below

<script>
YUI().use(
'aui-tabview',
function(Y) {
new Y.TabView(
{
srcNode: '#myTab',
type: 'pills'
}
).render();
}
);
Can some one please help me out with the solution here.