フォームの上部に小さなタブをすばやく作成しました。
各タブの要素を実際に変更するつもりはありません。ユーザーがクリックしたタブに基づいて、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>