I'm in the process of setting up a system that allows me to control which div is displayed on the screen at any given time. I have two divs that should be displayed using the buttons "page1" and "page2".
My approach involved giving each div an absolute position and a width of 100%. I then applied a CSS transform to shift both DIVs 100% to the left so they are offscreen.
Next, I aimed to use the :target pseudo-class to remove the transform from the selected div.
#page1 {
position: absolute;
text-align: center;
background: blue;
float: left;
width: 100%;
transform: translateX(-100%);
}
#page2 {
position: absolute;
text-align: center;
background: red;
float: left;
width: 100%;
transform: translateX(-100%);
}
:target {
transform: translateX(0);
}
Manually setting the transform to 0 in the CSS results in the DIV displaying correctly. However, clicking the link doesn't produce any effect. Am I overlooking something here? Thank you.
Here is the full HTML/CSS file:
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.controlBar {
text-align: center;
float: left;
width: 100%;
background-color: green;
}
.pageContain {
float: left;
width: 100%;
}
#page1 {
position: absolute;
text-align: center;
background: blue;
float: left;
width: 100%;
transform: translateX(-100%);
}
#page2 {
position: absolute;
text-align: center;
background: red;
float: left;
width: 100%;
transform: translateX(-100%);
}
:target {
transform: translateX(0);
}
</style>
</head>
<body>
<div class="controlBar">
<h1>Control Bar</h1>
<a href="#page1">Page 1</a>
<a href="#page2">Page 2</a>
</div>
<div class="pageContain">
<div id="page1">
<h1>page 1</h1>
</div>
<div id="page2">
<h1>page 2</h1>
</div>
</div>
</body>
</html>