Я быстро составил небольшую вкладку в верхней части моей формы.Вкладка полосы нижнего края с помощью CSS
Я не собираюсь на самом деле изменять элементы на каждой вкладке, я просто буду использовать javascript для отображения определенных полей и скрыть других, основываясь на той вкладке, которую пользователь нажимает.
Таким образом, нажатие кнопки на вкладке осуществляется путем изменения цвета фона и веса шрифта выбранной вкладки с помощью javascript.
Вот как это выглядит:
Мой основной вопрос о design_tabsborderul, что я использую. Единственная причина, по которой я это сказал, - это то, что я хочу иметь изображение с вертикальным уклоном градиента цвета вкладок до белого. Этот код ниже работает отлично на 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>