Ладно, так: я пытаюсь разместить инфобокс на своей странице. Основная идея заключается в следующем:
Мыши на коричневом изогнутом уголке. Цвет вкладки меняется на белый, становится квадратным, и появляется окно с информацией об этой вкладке.
, пока мышь остается над этой вкладкой или над соответствующим блоком информации, вкладка остается белой и квадратной, а связанный блок информации остается открытым.
человек отстает от вкладки и соответствующего поля. Коробка закрывается, вкладка становится коричневой и пышной.
Пока мне удалось сделать коричневые вкладки белыми, если они зависли, и появилась коробка с информацией. он остается белым, а информация остается открытой. Однако я не могу понять две вещи:
- как заставить угловые вкладки изменять свою форму при наведении курсора мыши, а затем возвращать их после отключения
- только через различные тесты удалось сделать его либо постоянно коричневым / круглым, либо белым / квадратным, без переключения.
- как сделать так, чтобы инфобокс и цвет / форма вкладки возвращались к нормальному коричневому / пышному / невидимому после удаления.
Я использовал инструкции w3school и некоторые потоки stackoverflow, чтобы продвинуться так далеко, но я ударил стену и не помню достаточно javascript, чтобы выяснить, в чем я ошибся. Я надеюсь, что предоставляю достаточно информации для помощи.
Если возможно, мне нужно решение в CSS / Javascript. Большинство возможных решений, которые я видел, находятся в jquery, который меня еще больше сбивает с толку. Однако, если есть более простое решение всех моих проблем, которые я как-то пропустил, я очень открыт для изучения.
Для справки вот мой код:
css моей страницы:
/* Style the containment unit*/
.tabcontainer {
clear: both;
border-top: 1px solid #BB8571;
margin-top: 10px;
-webkit-box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);
box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);
min-height:200px;
}
/* Style the tabs*/
.tabcontainer button {
display:block;
width:20%;
float:left;
text-align:center;
padding: 1em;
-webkit-box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);
box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);
font-family: "Century Gothic", Verdana, Geneva, sans-serif;
letter-spacing: 0.2em;
border: none;
outline: none;
}
.tabcontainer button:nth-child(even) {background:#d7b8ac;}
.tabcontainer button:nth-child(odd) {background:#f4dac3;}
/* Change background color of tabs on hover and maintain change while active */
.tabcontainer button:hover, .tabcontainer button.active {
background-color:#fff;
}
/*specific corner tab styling*/
.tabcontainer button:nth-child(1) {
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-bottomleft: 25px;
border-bottom-left-radius: 25px;
}
.tabcontainer button:nth-child(5) {
-webkit-border-bottom-right-radius: 25px;
-moz-border-radius-bottomright: 25px;
border-bottom-right-radius: 25px;
}
/* Style the infoboxes */
.tabcontent {
display:none;
background-color:tan;
padding:2em 1em 1em;
height:170px;
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-bottomleft: 25px;
border-bottom-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;
-moz-border-radius-bottomright: 25px;
border-bottom-right-radius: 25px;
-webkit-box-shadow: inset 0px -5px 5px 3px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0px -5px 5px 3px rgba(0,0,0,0.1);
box-shadow: inset 0px -5px 5px 3px rgba(0,0,0,0.1);
}
HTML-код моей страницы:
<div class="tabcontainer"> <!––wraps around both tabs and info boxes-->
<!––below: bar of button tabs-->
<button class="tablinks" id="t1" onmouseover="infoBox(event, 'b1')">b1</button>
<button class="tablinks" id="t2" onmouseover="infoBox(event, 'b2')">b2</button>
<button class="tablinks" id="t3" onmouseover="infoBox(event, 'b3')">b3</button>
<button class="tablinks" id="t4" onmouseover="infoBox(event, 'b4')">b4</button>
<button class="tablinks" id="t5" onmouseover="infoBox(event, 'b5')">b5</button>
<!––below: five infoboxes with generic contents-->
<div id="b1" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="b2" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="b3" class="tabcontent">
<h3>LA</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="b4" class="tabcontent">
<h3>NYC</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="b5" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
и javascript моей страницы, который, как вы можете видеть, сильно записан, когда я пытаюсь выяснить, как, черт возьми, он работает.
//start infoBox function to open infobox of a tab, concerning event and affected 'tab id'
function infoBox(event, tabID) {
//declare variables of i=data, tabcontent=blurb, tablinks=buttons
var i, tabcontent, tablinks;
// find variable=tabcontent as anything with class 'tabcontent'
tabcontent = document.getElementsByClassName("tabcontent");
// hide variables of tabcontents
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// find variable=tablinks as anything with class 'tablinks'
tablinks = document.getElementsByClassName("tablinks");
// remove active status of tablinks
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// show the current onmouseover tab
document.getElementById(tabID).style.display = "block";
// related named target of event infobox, activate and show
event.currentTarget.className += " active";
}