Q:

Javascript Program to implement Tabs

YasminRadwan26
Save to bookmark
|
2022-05-24
|
  153 
0

Javascript Program to implement Tabs by using javascript to get the data inside of a tab

JavaScript programming, examples, JavaScript programming examples,
login and add your own answer to this question

All Answers

YasminRadwan26
2022-05-24
need an explanation for this answer? contact us directly to get an explanation for this answer 

<html>
<head>
<style>
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: black;
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    color:white;
}

.tab button:hover {
    background-color: orange;
    color:black;
}

.tabdata {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
</style>

<script>
function openTab(evt, language) {
    var i, tabdata, tablinks;
    tabdata = document.getElementsByClassName("tabdata");
    for (i = 0; i < tabdata.length; i++) {
        tabdata[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(language).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>

</head>

<body>

<p>Click on the buttons to get inside Data:</p>

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'HTML')">HTML</button>
  <button class="tablinks" onclick="openTab(event, 'CSS')">CSS</button>
  <button class="tablinks" onclick="openTab(event, 'JavaScript')">JavaScript</button>
</div>

<div id="HTML" class="tabdata">
  <h3>HTML</h3>
  <p>HTML is used to define the content of web pages.</p>
</div>

<div id="CSS" class="tabdata">
  <h3>CSS</h3>
  <p>CSS is used to specify the layout of web pages.</p> 
</div>

<div id="JavaScript" class="tabdata">
  <h3>JavaScript</h3>
  <p>JavaScript is used to program the behavior of web pages.</p>
</div>
     
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

Similar questions

need a help?

find thousands of online teachers now