我很快就在我的表格上做了一个小标签。
我不会实际更改每个选项卡上的元素，我只是要根据用户单击的选项卡使用 javascript 来显示某些字段并隐藏其他字段。
因此，用户知道他们的选项卡被点击的方式是使用 javascript 更改所选选项卡的背景颜色和字体粗细。
这是它的外观：
我的主要问题是关于design_tabsborder ul我正在使用的。我把它放在那里的唯一原因是因为我想要一个垂直渐变淡出标签颜色到白色的图像。下面的代码在 Chrome 上运行良好，除了角不是圆角之外，它在 Firefox 上也运行良好。
所以我没有想要解决的问题，但我想知道在结构上或其他方面是否真的存在问题，以及我这样做的方式。
以下是我的 CSS：
.design_tabs
{
list-style-type:none;
width:95%;
}
.design_tabsborder
{
background-image:url(images/tabsbg.jpg);
background-position:bottom;
background-repeat:repeat-x;
height:15px;
width:100%;
margin-top:10px;
}
.design_tab
{
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
float:left;
display:block;
padding:5px 3px 5px 3px;
text-align:center;
width:112px;
color:black;
margin-left:2px;
background-color:lightgray;
cursor:pointer;
}
还有我的 HTML：
<ul class='design_tabs' id='design_tabs' style='position:absolute; top:150px; left:20px;'>
<li class='design_tab tabon' id='choose_images'>
Choose images
</li>
<li class='design_tab taboff' id='company_details'>
Company details
</li>
<li class='design_tab taboff' id='personal_details'>
Personal details
</li>
<li class='design_tab taboff' id='final_review'>
Final Review
</li>
<br /><ul class='design_tabsborder'><li> </li></ul>
</ul>