Switch between div that will take up entire page in pure jsBest way to center a <div> on a page vertically and horizontally?How to align a <div> to the middle (horizontally/width) of the pageExpand a div to fill the remaining widthWhat is the difference between <section> and <div>?Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for itparent div with absolutely positioned child divs refuses to be 100% heightJAVASCRIPT - Dynamic Createt Div's won't take the given style ( width & height )How do I get responsive CSS to fit the viewport when switching between portrait and landscape?Cannot display HTML stringthe page render in disorder after switching from landscape to portrait in ios 9
Where can/should I, as a high schooler, publish a paper regarding the derivation of a formula?
Could George I (of Great Britain) speak English?
Is there any way to keep a player from killing an NPC?
"fF" letter combination seems to be typeset strangely or incorrectly
Filling a listlineplot with a texture
Ghidra: Prepend memory segment in assembly listing view
Non-visual Computers - thoughts?
Are there any elected officials in the U.S. who are not legislators, judges, or constitutional officers?
Billiard balls collision
What does "rel" in `mathrel` and `stackrel` stands for?
How to find out the average duration of the peer-review process for a given journal?
Who was the most successful German spy against Great Britain in WWII, from the contemporary German perspective?
How much does Commander Data weigh?
“T” in subscript in formulas
Why does Windows store Wi-Fi passwords in a reversible format?
Very slow boot time and poor perfomance
How do proponents of Sola Scriptura address the ministry of those Apostles who authored no parts of Scripture?
Why are non-collision-resistant hash functions considered insecure for signing self-generated information
Was there ever a treaty between 2 entities with significantly different translations to the detriment of one party?
How many birds in the bush?
"There were either twelve sexes or none."
Why is the UK so keen to remove the "backstop" when their leadership seems to think that no border will be needed in Northern Ireland?
Changing JPEG to RAW to use on Lightroom?
Can you cast bonus action and reaction spells while already casting a spell?
Switch between div that will take up entire page in pure js
Best way to center a <div> on a page vertically and horizontally?How to align a <div> to the middle (horizontally/width) of the pageExpand a div to fill the remaining widthWhat is the difference between <section> and <div>?Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for itparent div with absolutely positioned child divs refuses to be 100% heightJAVASCRIPT - Dynamic Createt Div's won't take the given style ( width & height )How do I get responsive CSS to fit the viewport when switching between portrait and landscape?Cannot display HTML stringthe page render in disorder after switching from landscape to portrait in ios 9
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I am looking for a way to, with multiple <div> elements, have some functionality that can switch between the <div> as if they were pages. I want there to be an 'active' page, and when certain elements or <a> are clicked, there is a way to switch to another div that takes up the whole page. At any given time, only one such page-like <div> is visible.
I am aware this can be done in jquery, such as with their data-role="page" attribute for divs, but I am wondering how this can be done mechanically in pure javascript and css.
Here is an example I wrote, but it does not work, it only allows a transition once, then get stuck.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Divs</title>
<style>
.uipage
top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
border: 0;
.lightpage
background-color: #fcfbd1;
.darkpage
background-color: red;
</style>
</head>
<body>
<div class="lightpage" id="pageone" name="pagetype">
<p onclick="switchPages();">Hello! This is page one!</p>
</div>
<div class="darkpage" id="pagetwo" name="pagetype">
<p onclick="switchPages();">Hello! This is page two!</p>
</div>
<script>
document.getElementById('pageone').style.top = 0;
document.getElementById('pageone').style.left = 0;
document.getElementById('pageone').style.width = '100%';
document.getElementById('pageone').style['min-height'] = '100%';
document.getElementById('pageone').style.position = 'absolute';
document.getElementById('pageone').style.border = 0;
</script>
<script type="text/javascript">
var currentPage = 1;
function switchPages()
if(currentPage === 1)
document.getElementById('pagetwo').style.top = 0;
document.getElementById('pagetwo').style.left = 0;
document.getElementById('pagetwo').style.width = '100%';
document.getElementById('pagetwo').style['min-height'] = '100%';
document.getElementById('pagetwo').style.position = 'absolute';
document.getElementById('pagetwo').style.border = 0;
currentPage = 2;
else if(currentPage === 2)
document.getElementById('pageone').style.top = 0;
document.getElementById('pageone').style.left = 0;
document.getElementById('pageone').style.width = '100%';
document.getElementById('pageone').style['min-height'] = '100%';
document.getElementById('pageone').style.position = 'absolute';
document.getElementById('pageone').style.border = 0;
currentPage = 1;
</script>
</body>
</html>Basically there is a transition to page two, but then it will not work after that. I am not sure if dynamically changing the style object is a good approach here or not.
javascript html css
edited Mar 27 at 18:54
Paolo
3471 silver badge12 bronze badges
asked Mar 27 at 18:49
Josh WeinsteinJosh Weinstein
1,1891 gold badge9 silver badges24 bronze badges
add a comment |
I am looking for a way to, with multiple <div> elements, have some functionality that can switch between the <div> as if they were pages. I want there to be an 'active' page, and when certain elements or <a> are clicked, there is a way to switch to another div that takes up the whole page. At any given time, only one such page-like <div> is visible.
I am aware this can be done in jquery, such as with their data-role="page" attribute for divs, but I am wondering how this can be done mechanically in pure javascript and css.
Here is an example I wrote, but it does not work, it only allows a transition once, then get stuck.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Divs</title>
<style>
.uipage
top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
border: 0;
.lightpage
background-color: #fcfbd1;
.darkpage
background-color: red;
</style>
</head>
<body>
<div class="lightpage" id="pageone" name="pagetype">
<p onclick="switchPages();">Hello! This is page one!</p>
</div>
<div class="darkpage" id="pagetwo" name="pagetype">
<p onclick="switchPages();">Hello! This is page two!</p>
</div>
<script>
document.getElementById('pageone').style.top = 0;
document.getElementById('pageone').style.left = 0;
document.getElementById('pageone').style.width = '100%';
document.getElementById('pageone').style['min-height'] = '100%';
document.getElementById('pageone').style.position = 'absolute';
document.getElementById('pageone').style.border = 0;
</script>
<script type="text/javascript">
var currentPage = 1;
function switchPages()
if(currentPage === 1)
document.getElementById('pagetwo').style.top = 0;
document.getElementById('pagetwo').style.left = 0;
document.getElementById('pagetwo').style.width = '100%';
document.getElementById('pagetwo').style['min-height'] = '100%';
document.getElementById('pagetwo').style.position = 'absolute';
document.getElementById('pagetwo').style.border = 0;
currentPage = 2;
else if(currentPage === 2)
document.getElementById('pageone').style.top = 0;
document.getElementById('pageone').style.left = 0;
document.getElementById('pageone').style.width = '100%';
document.getElementById('pageone').style['min-height'] = '100%';
document.getElementById('pageone').style.position = 'absolute';
document.getElementById('pageone').style.border = 0;
currentPage = 1;
</script>
</body>
</html>Basically there is a transition to page two, but then it will not work after that. I am not sure if dynamically changing the style object is a good approach here or not.
javascript html css
edited Mar 27 at 18:54
Paolo
3471 silver badge12 bronze badges
asked Mar 27 at 18:49
Josh WeinsteinJosh Weinstein
1,1891 gold badge9 silver badges24 bronze badges
add a comment |
I am looking for a way to, with multiple <div> elements, have some functionality that can switch between the <div> as if they were pages. I want there to be an 'active' page, and when certain elements or <a> are clicked, there is a way to switch to another div that takes up the whole page. At any given time, only one such page-like <div> is visible.
I am aware this can be done in jquery, such as with their data-role="page" attribute for divs, but I am wondering how this can be done mechanically in pure javascript and css.
Here is an example I wrote, but it does not work, it only allows a transition once, then get stuck.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Divs</title>
<style>
.uipage
top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
border: 0;
.lightpage
background-color: #fcfbd1;
.darkpage
background-color: red;
</style>
</head>
<body>
<div class="lightpage" id="pageone" name="pagetype">
<p onclick="switchPages();">Hello! This is page one!</p>
</div>
<div class="darkpage" id="pagetwo" name="pagetype">
<p onclick="switchPages();">Hello! This is page two!</p>
</div>
<script>
document.getElementById('pageone').style.top = 0;
document.getElementById('pageone').style.left = 0;
document.getElementById('pageone').style.width = '100%';
document.getElementById('pageone').style['min-height'] = '100%';
document.getElementById('pageone').style.position = 'absolute';
document.getElementById('pageone').style.border = 0;
</script>
<script type="text/javascript">
var currentPage = 1;
function switchPages()
if(currentPage === 1)
document.getElementById('pagetwo').style.top = 0;
document.getElementById('pagetwo').style.left = 0;
document.getElementById('pagetwo').style.width = '100%';
document.getElementById('pagetwo').style['min-height'] = '100%';
document.getElementById('pagetwo').style.position = 'absolute';
document.getElementById('pagetwo').style.border = 0;
currentPage = 2;
else if(currentPage === 2)
document.getElementById('pageone').style.top = 0;
document.getElementById('pageone').style.left = 0;
document.getElementById('pageone').style.width = '100%';
document.getElementById('pageone').style['min-height'] = '100%';
document.getElementById('pageone').style.position = 'absolute';
document.getElementById('pageone').style.border = 0;
currentPage = 1;
</script>
</body>
</html>Basically there is a transition to page two, but then it will not work after that. I am not sure if dynamically changing the style object is a good approach here or not.
javascript html css
edited Mar 27 at 18:54
Paolo
3471 silver badge12 bronze badges
asked Mar 27 at 18:49
Josh WeinsteinJosh Weinstein
1,1891 gold badge9 silver badges24 bronze badges
I am looking for a way to, with multiple <div> elements, have some functionality that can switch between the <div> as if they were pages. I want there to be an 'active' page, and when certain elements or <a> are clicked, there is a way to switch to another div that takes up the whole page. At any given time, only one such page-like <div> is visible.
I am aware this can be done in jquery, such as with their data-role="page" attribute for divs, but I am wondering how this can be done mechanically in pure javascript and css.
Here is an example I wrote, but it does not work, it only allows a transition once, then get stuck.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Divs</title>
<style>
.uipage
top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
border: 0;
.lightpage
background-color: #fcfbd1;
.darkpage
background-color: red;
</style>
</head>
<body>
<div class="lightpage" id="pageone" name="pagetype">
<p onclick="switchPages();">Hello! This is page one!</p>
</div>
<div class="darkpage" id="pagetwo" name="pagetype">
<p onclick="switchPages();">Hello! This is page two!</p>
</div>
<script>
document.getElementById('pageone').style.top = 0;
document.getElementById('pageone').style.left = 0;
document.getElementById('pageone').style.width = '100%';
document.getElementById('pageone').style['min-height'] = '100%';
document.getElementById('pageone').style.position = 'absolute';
document.getElementById('pageone').style.border = 0;
</script>
<script type="text/javascript">
var currentPage = 1;
function switchPages()
if(currentPage === 1)
document.getElementById('pagetwo').style.top = 0;
document.getElementById('pagetwo').style.left = 0;
document.getElementById('pagetwo').style.width = '100%';
document.getElementById('pagetwo').style['min-height'] = '100%';
document.getElementById('pagetwo').style.position = 'absolute';
document.getElementById('pagetwo').style.border = 0;
currentPage = 2;
else if(currentPage === 2)
document.getElementById('pageone').style.top = 0;
document.getElementById('pageone').style.left = 0;
document.getElementById('pageone').style.width = '100%';
document.getElementById('pageone').style['min-height'] = '100%';
document.getElementById('pageone').style.position = 'absolute';
document.getElementById('pageone').style.border = 0;
currentPage = 1;
</script>
</body>
</html>Basically there is a transition to page two, but then it will not work after that. I am not sure if dynamically changing the style object is a good approach here or not.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Divs</title>
<style>
.uipage
top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
border: 0;
.lightpage
background-color: #fcfbd1;
.darkpage
background-color: red;
</style>
</head>
<body>
<div class="lightpage" id="pageone" name="pagetype">
<p onclick="switchPages();">Hello! This is page one!</p>
</div>
<div class="darkpage" id="pagetwo" name="pagetype">
<p onclick="switchPages();">Hello! This is page two!</p>
</div>
<script>
document.getElementById('pageone').style.top = 0;
document.getElementById('pageone').style.left = 0;
document.getElementById('pageone').style.width = '100%';
document.getElementById('pageone').style['min-height'] = '100%';
document.getElementById('pageone').style.position = 'absolute';
document.getElementById('pageone').style.border = 0;
</script>
<script type="text/javascript">
var currentPage = 1;
function switchPages()
if(currentPage === 1)
document.getElementById('pagetwo').style.top = 0;
document.getElementById('pagetwo').style.left = 0;
document.getElementById('pagetwo').style.width = '100%';
document.getElementById('pagetwo').style['min-height'] = '100%';
document.getElementById('pagetwo').style.position = 'absolute';
document.getElementById('pagetwo').style.border = 0;
currentPage = 2;
else if(currentPage === 2)
document.getElementById('pageone').style.top = 0;
document.getElementById('pageone').style.left = 0;
document.getElementById('pageone').style.width = '100%';
document.getElementById('pageone').style['min-height'] = '100%';
document.getElementById('pageone').style.position = 'absolute';
document.getElementById('pageone').style.border = 0;
currentPage = 1;
</script>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Divs</title>
<style>
.uipage
top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
border: 0;
.lightpage
background-color: #fcfbd1;
.darkpage
background-color: red;
</style>
</head>
<body>
<div class="lightpage" id="pageone" name="pagetype">
<p onclick="switchPages();">Hello! This is page one!</p>
</div>
<div class="darkpage" id="pagetwo" name="pagetype">
<p onclick="switchPages();">Hello! This is page two!</p>
</div>
<script>
document.getElementById('pageone').style.top = 0;
document.getElementById('pageone').style.left = 0;
document.getElementById('pageone').style.width = '100%';
document.getElementById('pageone').style['min-height'] = '100%';
document.getElementById('pageone').style.position = 'absolute';
document.getElementById('pageone').style.border = 0;
</script>
<script type="text/javascript">
var currentPage = 1;
function switchPages()
if(currentPage === 1)
document.getElementById('pagetwo').style.top = 0;
document.getElementById('pagetwo').style.left = 0;
document.getElementById('pagetwo').style.width = '100%';
document.getElementById('pagetwo').style['min-height'] = '100%';
document.getElementById('pagetwo').style.position = 'absolute';
document.getElementById('pagetwo').style.border = 0;
currentPage = 2;
else if(currentPage === 2)
document.getElementById('pageone').style.top = 0;
document.getElementById('pageone').style.left = 0;
document.getElementById('pageone').style.width = '100%';
document.getElementById('pageone').style['min-height'] = '100%';
document.getElementById('pageone').style.position = 'absolute';
document.getElementById('pageone').style.border = 0;
currentPage = 1;
</script>
</body>
</html>javascript html css
javascript html css
edited Mar 27 at 18:54
Paolo
3471 silver badge12 bronze badges
asked Mar 27 at 18:49
Josh WeinsteinJosh Weinstein
1,1891 gold badge9 silver badges24 bronze badges
edited Mar 27 at 18:54
Paolo
3471 silver badge12 bronze badges
asked Mar 27 at 18:49
Josh WeinsteinJosh Weinstein
1,1891 gold badge9 silver badges24 bronze badges
edited Mar 27 at 18:54
Paolo
3471 silver badge12 bronze badges
edited Mar 27 at 18:54
Paolo
3471 silver badge12 bronze badges
edited Mar 27 at 18:54
Paolo
3471 silver badge12 bronze badges
3471 silver badge12 bronze badges
asked Mar 27 at 18:49
Josh WeinsteinJosh Weinstein
1,1891 gold badge9 silver badges24 bronze badges
asked Mar 27 at 18:49
Josh WeinsteinJosh Weinstein
1,1891 gold badge9 silver badges24 bronze badges
asked Mar 27 at 18:49
Josh WeinsteinJosh Weinstein
1,1891 gold badge9 silver badges24 bronze badges
1,1891 gold badge9 silver badges24 bronze badges
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Seems to me that you're only applying the styles to the <div> you're trying to show but you're not actually hiding the other one.
Have you tried applying display: none; to the div you're meaning to hide?
I would apply the desired styles for the div assuming it's visible and just changing the display mode from none to block or viceversa depending on the one clicked
answered Mar 27 at 19:00
MaxMax
831 silver badge7 bronze badges
Works perfectly, thanks!
– Josh Weinstein
Mar 27 at 19:05
add a comment |
Several things going on.
First, you should avoid styles as much as you can. Instead, use classes, they run better and you can reuse the classes. Then you can just use
document.getElementById('pageone').addClass('selected');
document.getElementById('pagetwo').removeClass('selected');
Second, You are adding styles to the target id, but you are not removing the styles to the id/ids that you don't want in front.
I know you want pure js, but you also may want to look up jquery. It can make things like this a lot easier with simple commands like
$('#pageone').show();
$('#pagetwo').hide();
answered Mar 27 at 19:07
JeffJeff
361 bronze badge
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55384522%2fswitch-between-div-that-will-take-up-entire-page-in-pure-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Seems to me that you're only applying the styles to the <div> you're trying to show but you're not actually hiding the other one.
Have you tried applying display: none; to the div you're meaning to hide?
I would apply the desired styles for the div assuming it's visible and just changing the display mode from none to block or viceversa depending on the one clicked
answered Mar 27 at 19:00
MaxMax
831 silver badge7 bronze badges
Works perfectly, thanks!
– Josh Weinstein
Mar 27 at 19:05
add a comment |
Seems to me that you're only applying the styles to the <div> you're trying to show but you're not actually hiding the other one.
Have you tried applying display: none; to the div you're meaning to hide?
I would apply the desired styles for the div assuming it's visible and just changing the display mode from none to block or viceversa depending on the one clicked
answered Mar 27 at 19:00
MaxMax
831 silver badge7 bronze badges
Works perfectly, thanks!
– Josh Weinstein
Mar 27 at 19:05
add a comment |
Seems to me that you're only applying the styles to the <div> you're trying to show but you're not actually hiding the other one.
Have you tried applying display: none; to the div you're meaning to hide?
I would apply the desired styles for the div assuming it's visible and just changing the display mode from none to block or viceversa depending on the one clicked
answered Mar 27 at 19:00
MaxMax
831 silver badge7 bronze badges
Seems to me that you're only applying the styles to the <div> you're trying to show but you're not actually hiding the other one.
Have you tried applying display: none; to the div you're meaning to hide?
I would apply the desired styles for the div assuming it's visible and just changing the display mode from none to block or viceversa depending on the one clicked
answered Mar 27 at 19:00
MaxMax
831 silver badge7 bronze badges
answered Mar 27 at 19:00
MaxMax
831 silver badge7 bronze badges
answered Mar 27 at 19:00
MaxMax
831 silver badge7 bronze badges
answered Mar 27 at 19:00
MaxMax
831 silver badge7 bronze badges
831 silver badge7 bronze badges
Works perfectly, thanks!
– Josh Weinstein
Mar 27 at 19:05
add a comment |
Works perfectly, thanks!
– Josh Weinstein
Mar 27 at 19:05
Works perfectly, thanks!
– Josh Weinstein
Mar 27 at 19:05
Works perfectly, thanks!
– Josh Weinstein
Mar 27 at 19:05
add a comment |
Several things going on.
First, you should avoid styles as much as you can. Instead, use classes, they run better and you can reuse the classes. Then you can just use
document.getElementById('pageone').addClass('selected');
document.getElementById('pagetwo').removeClass('selected');
Second, You are adding styles to the target id, but you are not removing the styles to the id/ids that you don't want in front.
I know you want pure js, but you also may want to look up jquery. It can make things like this a lot easier with simple commands like
$('#pageone').show();
$('#pagetwo').hide();
answered Mar 27 at 19:07
JeffJeff
361 bronze badge
add a comment |
Several things going on.
First, you should avoid styles as much as you can. Instead, use classes, they run better and you can reuse the classes. Then you can just use
document.getElementById('pageone').addClass('selected');
document.getElementById('pagetwo').removeClass('selected');
Second, You are adding styles to the target id, but you are not removing the styles to the id/ids that you don't want in front.
I know you want pure js, but you also may want to look up jquery. It can make things like this a lot easier with simple commands like
$('#pageone').show();
$('#pagetwo').hide();
answered Mar 27 at 19:07
JeffJeff
361 bronze badge
add a comment |
Several things going on.
First, you should avoid styles as much as you can. Instead, use classes, they run better and you can reuse the classes. Then you can just use
document.getElementById('pageone').addClass('selected');
document.getElementById('pagetwo').removeClass('selected');
Second, You are adding styles to the target id, but you are not removing the styles to the id/ids that you don't want in front.
I know you want pure js, but you also may want to look up jquery. It can make things like this a lot easier with simple commands like
$('#pageone').show();
$('#pagetwo').hide();
answered Mar 27 at 19:07
JeffJeff
361 bronze badge
Several things going on.
First, you should avoid styles as much as you can. Instead, use classes, they run better and you can reuse the classes. Then you can just use
document.getElementById('pageone').addClass('selected');
document.getElementById('pagetwo').removeClass('selected');
Second, You are adding styles to the target id, but you are not removing the styles to the id/ids that you don't want in front.
I know you want pure js, but you also may want to look up jquery. It can make things like this a lot easier with simple commands like
$('#pageone').show();
$('#pagetwo').hide();
answered Mar 27 at 19:07
JeffJeff
361 bronze badge
answered Mar 27 at 19:07
JeffJeff
361 bronze badge
answered Mar 27 at 19:07
JeffJeff
361 bronze badge
answered Mar 27 at 19:07
JeffJeff
361 bronze badge
361 bronze badge
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55384522%2fswitch-between-div-that-will-take-up-entire-page-in-pure-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
