Держите вкладку активное состояние, и откройте вкладку по умолчанию

Question

Я сделал jsfiddle моей грубой настройки здесь:

https://jsfiddle.net/9h5eqsuy/1/

а) Мой вопрос, у меня есть вкладки работают достаточно хорошо, но он выиграл» t удерживайте активное фиолетовое состояние после его щелчка. Я пробовал несколько решений безрезультатно.

b) Кроме того, я не могу понять, как открыть вкладку «элемент 1» по умолчанию при загрузке страницы.

Хотелось бы избежать javascript, если это возможно. Любые мысли были бы замечательными.

HTML

<p> 
    <div class="tabbuttonsdiv"> 
    <a href="#item1" class="tabbuttons">item 1</a> 
    <a href="#item2" class="tabbuttons">item 2</a> 
    <a href="#item3" class="tabbuttons">item 3</a> 
    </div> 

    <div class="items"> 
    <p id="item1" class="tabcontent">... item 1... 
    <p id="item2" class="tabcontent">... item 2... 
    <p id="item3" class="tabcontent">...  
    </div> 
</p> 

CSS

div.items p { 
    display: none; 
} 

div.items p:target { 
    display: block; 
} 

.tabbuttons{ 
    color: #fff; 
    background-color:#3195c1; 
    border: none; 
    padding: 10px; 
} 

.tabbuttons:hover { 
    background-color:PURPLE; 
} 
.tabcontent{ 
    background: #ddd; 
    min-height: 100px; 
} 

последний вопрос, если кто-то чувствует себя щедрым:

с) На данный момент я не могу поставить Див-то или что-нибудь внутри «здесь "ниже:

<p id="item1" class="tabcontent">... "here"... </p> 

Кажется, это похоже на текст, и мясники все, что я вставляю в него. Это их простой способ исправить это?

Answer 1

а) вы можете добавить class="active" в активном окне, чтобы сохранить цвет

б) вы можете использовать этот же active класс, чтобы показать вкладку по умолчанию.

) вы не можете вкладывать <div> под <p>, но нет никаких причин, вы не можете сделать свой <p class="tabcontent"> в <div class="tabcontent">.

Я обновил скрипку: https://jsfiddle.net/9h5eqsuy/2/

Answer 2

Поскольку вы помечено JQuery в вашем вопросе, я пришел к этому решению.

CSS:

div.items p {display: none} 
div.items p:first-child {display: block; } /* solution for b. */ 

.tabbuttons{ 
    color: #fff; 
    background-color:#3195c1; 
    border: none; 
    padding: 10px; 
} 

.tabbuttons:hover { 
    background-color:PURPLE; 
} 
.tabcontent{ 
background: #ddd; 
    min-height: 100px; 
} 

.activeTab { background-color:PURPLE } /* solution for a. */ 
.activeItem { display: block; } 

JQuery

$(function() {  
    $('.tabbuttons').on('click', function() { 
     $('.tabbuttons').removeClass('activeTab'); /* solution for a. */ 
     $(this).addClass('activeTab'); /* solution for a. */ 
     var i = $(this).attr('href'); 
     $('.items p').hide(); 
     $(i).show(); 
    }); 
}); 

Updated Fiddle

Для вопроса с .: использовать DIV вместо абзацев ...

Answer 3

Это близко, но не совсем там (и, как я заметил, я, вероятно, перейду на javascript)

Что вам нужно сделать, это создать иерархическую взаимосвязь между вашими ссылками и целями. Для этого поставьте ссылку и связанную с ней цель в контейнере. Затем я использовал абсолютное позиционирование для позиционирования целей в контейнере stage. Я также сохраняю item1, который всегда отображается так, что он присутствует на загрузке страницы, но имеет более низкий z-index, чем другие элементы, чтобы они отображались поверх него.

Где это падает вниз вкладка itme1 не highlited на странице загрузки

div.items p { 
 
    display: none 
 
} 
 
div.items p:target { 
 
    display: block 
 
} 
 
#stage { 
 
    position: releative; 
 
} 
 
#stage>div { 
 
    display: inline-block; 
 
} 
 
#stage .item { 
 
    position: absolute; 
 
    z-index: 10; 
 
    display: none; 
 
    left: 8px; 
 
    width: 90% 
 
} 
 
#stage #item1 .item { 
 
    display: block; 
 
    z-index: 1; 
 
} 
 
#stage>div:target .item { 
 
    display: block; 
 
} 
 
.tabbuttons { 
 
    color: #fff; 
 
    background-color: #3195c1; 
 
    border: none; 
 
    padding: 10px; 
 
} 
 
.tabbuttons:hover, 
 
:target .tabbuttons { 
 
    background-color: PURPLE; 
 
} 
 
.tabcontent { 
 
    background: #ddd; 
 
    min-height: 100px; 
 
}

<div id="stage"> 
 
    <div id="item1"> 
 
    <a href="#item1" class="tabbuttons">item 1</a> 
 
    <div class="item"> 
 
     <p class="tabcontent">... item 1...</p> 
 
    </div> 
 
    </div> 
 
    <div id="item2"> 
 
    <a href="#item2" class="tabbuttons">item 2</a> 
 
    <div class="item"> 
 
     <p class="tabcontent">... item 2...</p> 
 
    </div> 
 
    </div> 
 
    <div id="item3"> 
 
    <a href="#item3" class="tabbuttons">item 3</a> 
 
    <div class="item"> 
 
     <p id="item3" class="tabcontent">...</p> 
 
    </div> 
 
    </div> 
 
</div>