修改目标:
首页内包含多个用到tab选项卡的地方,有图片选项卡,也有单纯用文字的选项卡。
希望
在左边栏显示调用网站公告和新闻资讯,tab切换,显示单纯文字内容。
在中间栏目显示默认的图片调用不变。
修改过程如下:
帝国默认图片tab选项卡代码是这样的:
Code:
<!-- tab选项卡,默认为点击变化,如需改为移动,将onmouseover改为onclick -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tbtn1">
<tr>
<td class="tbtncon"><ul><li class="curr" id="tab1_btn_0" onmouseover="etabit(this)">新闻</li><li id="tab1_btn_1" onmouseover="etabit(this)">图片</li><li id="tab1_btn_2" onmouseover="etabit(this)">影视</li><li id="tab1_btn_3" onmouseover="etabit(this)">FLASH</li></ul></td>
</tr>
<tr>
<td class="picList"><div id="tab1_div_0"> [phomenewspic]'news',3,6,128,90,1,20,20[/phomenewspic]
</div>
<div id="tab1_div_1" style="display:none;"> [phomenewspic]'photo',3,6,128,90,1,20,20[/phomenewspic]
</div>
<div id="tab1_div_2" style="display:none;"> [phomenewspic]'movie',3,6,128,90,1,20,20[/phomenewspic]
</div>
<div id="tab1_div_3" style="display:none;"> [phomenewspic]'flash',3,6,128,90,1,20,20[/phomenewspic]
</div></td>
</tr>
</table>
发现:原来tab1_btn_0 这个tab1这个数字很关键,tab选项卡必须用数字来定义。
于是我就修改成id=tab2_btn_0 对应 div id="tab2_div_0
然后测试。
欧也,成功了。。。。。。哈哈。。。。
得出结论:
同一个页面,用多个tab选项卡调用。每个选项卡,都必须用不同的id
就是id=tab1_btn_0和 div id="tab1_div_0 这里红色的部分也要修改掉,不能重复。后面的数字当然互相对应就可以了。调用可以使用cms的所有标签,想怎么用就怎么用。哈哈。
最后,大家调用会发现,虽然调用成功了。可是如果按照默认的代码来,你想调用的文字内容排列很难看。。。。
这就需要修改文字内容的修饰语法了。。。。我是修改成和其他默认文字调用一样就行了。
修改的时候。大家要注意,表格样式标签是<table class="tbtn1"> <td class="tbtncon">这样的,需要修改的话,就要去css文件中修改对应的地方。
还有一点尤其要注意。就是<li>标签后面的class也是在css里被定义的。也可以找到对应地方修改。
最后我的最终文字栏目tab选项卡调用代码是
<!-- tab选项卡,默认为点击变化,如需改为移动,将onmouseover改为onclick -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tbtn1">
<tr>
<td class="tbtncon" ><ul><li class="curr" id="tab2_btn_0" onmouseover="etabit(this)">最新资讯</li><li id="tab2_btn_1" onmouseover="etabit(this)">网站公告</li></ul></td>
</tr>
<tr>
<td
class="box" ><ul id="tab2_div_0">[ecmsinfo]0,6,32,0,3,2,0[/ecmsinfo]</ul>
<ul id="tab2_div_1" style="display:none;">[ecmsinfo]2,6,32,0,0,2,0[/ecmsinfo]</ul>
[ecmsinfo]0,2,18,0,5,5,1[/ecmsinfo]
</td>
</tr>
</table>
里面黑色的字部分,就是我特别定义,文字内容的样式。默认代码的div我换成了ul.因为我发现ul无序排列更适合文字内容的表达。。。。