Блог

Меня попросили попробовать скопировать страницу (им принадлежит страница), встроенную в .php, и воссоздать ее в редактируемую страницу в .html и .css для использования в Concrete, но я сталкиваюсь с некоторыми проблемами с корректной работой панели навигации.

http://jsfiddle.net/TYhnb/819/

Она должна отображать содержимое только на соответствующей вкладке, изменив функцию отображения содержимого с ‘none’ на ‘block’ и наоборот, изменив ее класс. Я на 90% уверен, что это будет невозможно решить с помощью одних только css и html, так что есть ли у кого-нибудь какие-либо советы о том, как я мог бы это реализовать?

CSS, HTML находятся на скрипке

 .tabs #tab-container-1-nav li.activeli a {
background: #1f5497;
color: #fff;
}

.tabs #tab-container-1-nav li a {
padding: 10px 15px;
background: #f2f2f2;
color: #4D4D4D;
text-decoration: none;
font-weight: bold;
font-size: 14px;
text-align: center;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}

.tabs #tab-container-1-nav li {
float: left;
display: inline;
margin-right: 8px;
}

.tabs ul {
list-style: none;
}

.main ul {
list-style: inside;
}

.main ul li {
font-size: 13px;
margin: 5px 0;
color: #0d3161;
}

div#tab-container-1 {
margin-top: 57px;
  

Вы абсолютно точно можете сделать это только с помощью HTML и CSS … используя метки для проверки альтернативных элементов радиовхода, проверенное состояние которых затем используется для определения отображения соседних элементов div.

Смотрите второй пример ниже для выделения вкладки при нажатии…

Пример 1

HTML

 <label for='tab1Content'>Tab 1</label>
<label for='tab2Content'>Tab 2</label>
<label for='tab3Content'>Tab 3</label>
<br />
<br />
<input type='radio' name='content' id='tab1Content' checked='true' />
<div>Tab 1 content</div>
<input type='radio' name='content' id='tab2Content' />
<div>Tab 2 content</div>
<input type='radio' name='content' id='tab3Content' />
<div>Tab 3 content</div>
  

CSS

 label {
    padding: 10px 15px;
    background: #f2f2f2;
    color: #4D4D4D;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}
input[name=content] {
    display:none;
}
input[name=content]  div {
    display:none;
}
input[name=content]:checked  div {
    display:block;
}
  

С помощью дополнительных хитростей HTML и CSS вы можете расширить это, чтобы не только показывать содержимое при нажатии, но и выделять текущую вкладку…

Пример 2: Более сложный — с выбором вкладки

HTML

 <div id='wrapper'>
    <div>
        <input type='radio' name='content' id='tab1Content' checked='true' />
        <label for='tab1Content'>Tab 1</label>
        <div>Tab 1 content</div>
    </div>
    <div>
        <input type='radio' name='content' id='tab2Content' />
        <label for='tab2Content'>Tab 2</label>
        <div>Tab 2 content</div>
    </div>
    <div>
        <input type='radio' name='content' id='tab3Content' />
        <label for='tab3Content'>Tab 3</label>
        <div>Tab 3 content</div>
    </div>
</div>
  

CSS

 label {
    padding: 10px 15px;
    background: #f2f2f2;
    color: #4D4D4D;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}
#wrapper {
    position:relative;
}
#wrapper > div {
    float:left;
    margin-right:10px;
}
input[name=content] {
    display:none;
}
input[name=content]~div {
    display:none;
    overflow:hidden;
    position:absolute;
    top:40px;
    left:0;
}
input[name=content]:checked~div {
    display:block;
}
input[name=content]:checked~label {
    background:lightblue;
}
  

Это возможно с помощью CSS3, быстрый поиск в Google показал мне эту статью, в которой содержится несколько демонстрационных версий (посмотрите в конце ссылку на демонстрационную страницу).

Если вам нужна обратная поддержка браузера, то, возможно, используйте jQuery или какую-нибудь библиотеку javascript, которая предоставляет эту функциональность. В прошлом мне очень везло с вкладками jQueryUI.

Если вы можете использовать JavaScript и импортировать jQuery и jQuery UI в свой проект, то простой способ сделать это — использовать jQuery UI

демонстрация с вашей скрипкой :

http://jsfiddle.net/Vinyl/GT926/1/

демонстрация в пользовательском интерфейсе jqueryhttp://jqueryui.com/tabs /

 $( "#tabs" ).tabs();