How to start off on a tab built in javascript/html instead of it being blank and having to click on one


Tags: javascript,html,css,tabs

Problem :

Hello i have a tab system built in javascript/html and css currently it only displays anything if you click on it first but i was wondering if i could make tab content automatically show up when the page is loaded and the sidebar is opened here is the code that makes my sidebar work

function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}

here is the site i am currently working on if you want to see how the tabs behave

And here is my css

#tab-ul{
list-style-type: none;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #006666;
width: 100%:

}

/* Float the list items side by side */
#tab-li {
float: left;
background: #006666;
border-top: 1px solid #006666;

}

/* Style the links inside the list items */
a#tab-li a {
display: inline-block;
color: black;
text-align: center;
padding-bottom:12px;
padding-top:12px;
padding-left: 7px;
padding-right: 6px;
text-decoration: none;
transition: 0.3s;
font-size: 14px;
}

 /* Change background color of links on hover */
#tab-li a:hover {
background-color: #006666;

}

/* Create an active/current tablink class */
#tab-li a:focus, .active {
background-color: darkcyan;
}

/* Style the tab content */
.tabcontent {
display: none;


}


Solution :

Find this particular html

<div id="chatrooms" class="tabcontent">

change it to:

<div id="chatrooms" class="tabcontent" style="display: block;">

This should work for you. As I look in F12 tools I can't see class being changed on click, just the style property

For hightligh locate:

<a href="#" class="tablinks" onclick="openTab(event, 'chatrooms')">Chatrooms</a>

Change to:

<a href="#" class="tablinks active" onclick="openTab(event, 'chatrooms')">Chatrooms</a>

Note that active class should follow after "tablinks" class because your javascript is replacing " active" including whitespace


    CSS Howto..

    How to reverse a CSS3 hover transformation?

    How to use only CSS to round my div tag area's corners?

    How to select element by order ? - Css

    How do I highlight only the innermost table row of a nested table?

    How to keep the top div height fixed and bottom div height in %age

    How to append a CSS rule to the another CSS rule

    How to edit horizantal drop down menu

    How would I write css to access the following class “total total_plus hidden_elem” or “total total_plus”?

    How do I join my list and div using css?

    How to position two divs horizontally within another div

    How to change checkbox's border style in CSS?

    How to make this breed of resizable vertical divider for two divs?

    How to manage assets for modern/ancient browsers

    How to set height?

    How to remove blue underline on text in Chrome - CSS?

    How make my CSS responsive using Bootstrap 3.1

    how to use automatic css hyphens with word-break: break-all?

    How do I keep an image and text centered vertically with bootstrap?

    How to use active and before with CSS?

    how to show text like 2 / 4 “page number / total pages” in css or css3

    CSS how to keep text always inline with a paragraph

    How to correctly apply a CSS style to all the images in a div having a specific class?

    How to make text wrap above and below a div?

    How to Scale Down a Large Image Using HTML and/or CSS

    change of encoding shows Weird symbols

    How can a site Use Javascript and NOT display any structural HTML in the browser?

    how to restrict the children element inside the parent element in css?

    How to align an image inside a DIV without adding new classes using CSS

    CSS how to style the “content”/“background” attribute of a custom checkbox tick sign?

    how to animate “simple jquery filtering” by using css only