Scribd
Upload
25 views

Tech

The document shows code for creating tabs with different content panels that can be displayed by hovering over tab buttons. It includes HTML markup, CSS styling and JavaScript code to toggle the display of the different content panels when the tabs are hovered over.

Uploaded by

azlannisar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
25 views

Tech

The document shows code for creating tabs with different content panels that can be displayed by hovering over tab buttons. It includes HTML markup, CSS styling and JavaScript code to toggle the display of the different content panels when the tabs are hovered over.

Uploaded by

azlannisar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

/* Style the tab */


.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}

/* Style the buttons inside the tab */


.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
font-size: 17px;
}

/* Change background color of buttons on hover */


.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}

/* Style the tab content */


.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
display: none;
}

/* Clear floats after the tab */


.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>

<h2>Hover Tabs</h2>
<p>Move the mouse over a button inside the tabbed menu:</p>

<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'London')">London</button>
<button class="tablinks" onmouseover="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onmouseover="openCity(event, 'Tokyo')">Tokyo</button>
</div>

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


<h3>London</h3>
<p>London is the capital city of England.</p>
</div>

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


<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>

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


<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>

<div class="clearfix"></div>

<script>
function openCity(evt, cityName) {
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(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>

</body>
</html>
Q.3. (2
marks)
Write code in Javascript for creating new images in javascript with scroll backwards or scroll
forward functions. Images will change when you will click on forward or backward arrows
_____________________
________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a{
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}

a:hover {
background-color: #ddd;
color: black;
}

.previous {
background-color: #f1f1f1;
color: black;
}

.next {
background-color: #04AA6D;
color: white;
}

.round {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Previous and Next Buttons</h2>

<a href="#" class="previous">&laquo; Previous</a>


<a href="#" class="next">Next &raquo;</a>

<a href="#" class="previous round">&#8249;</a>


<a href="#" class="next round">&#8250;</a>

</body>
</html>

You might also like