ITPOW控件-标签控件,功能强大,应用方便,但所给的示例看起来似乎过于单调,不具有吸引力,我们这里提供几种应用示例,供大家参考。
本参考是下载包中自带示例改进的,没有改动 JavaScript 代码,重点改动在 CSS。
首先,将 title 浮动到左边,做法是去掉 li 的 float 属性,为 ul 指定 float:left。
然后将 content 浮动到右边。
然后,添加想要的 normalTitle 样式和 activeTitle 样式,分别表示普通 title 和已经激活的 title 的样式。
这里分别是:
li.normalTitle div
{
/*边框和背景颜色与 block 背景颜色相同*/
border-top:1px solid #EEEEEE;
border-bottom:1px solid #EEEEEE;
background-color:#EEEEEE;
}
li.activeTitle div
{
border-top:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
background-color:#99CCFF;
}
之所以套一层 div 是为了兼容,请参见:多套一层使 padding、border 兼容。
在 normalTitle 中,尽管不显示 border,同样应该将 border 设置为 1px,只是颜色同背景一样。
最后,添加其它的样式修饰,如边距。
全部代码: