Display Tab Content Immediately On Page Load

I am creating a cinema website (school assignment) with three tabs: "Now Showing", "Coming Soon", "Promotions". I would like all content under "Now Showing" to be immediately visible upon page load. What do I need to edit in the HTML + Javascript code to do this?

I have only learnt HTML & CSS so far and adapted the Javascript code from w3schools. Hence, I'm not sure what to do. Thank you.

Here is the HTML code.

<div id="tab-rows">



<div class="tab">

<button class="tablinks" onclick="openContent(event, 'now- 

showing')">Now Showing</button>

<button class="tablinks" onclick="openContent(event, 'coming- 

soon')">Coming Soon</button>

<button class="tablinks" onclick="openContent(event, 

'promotions')">Promotions</button>

</div>



<div id="now-showing" class="tabcontent">

<p>Placeholder Content</p> 

</div>

<div id="coming-soon" class="tabcontent">

<p>Placeholder Content</p>

</div>

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

<p>Placeholder Content</p>

</div>

Here is the Javascript code.

<script>

  function openContent(evt, contentName) {

      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(contentName).style.display = "block";

      evt.currentTarget.className += " active";

    } 

</script>

asked Jan 1 at 2:01

sparkle

add a comment |

I have only learnt HTML & CSS so far and adapted the Javascript code from w3schools. Hence, I'm not sure what to do. Thank you.

Here is the HTML code.

<div id="tab-rows">



<div class="tab">

<button class="tablinks" onclick="openContent(event, 'now- 

showing')">Now Showing</button>

<button class="tablinks" onclick="openContent(event, 'coming- 

soon')">Coming Soon</button>

<button class="tablinks" onclick="openContent(event, 

'promotions')">Promotions</button>

</div>



<div id="now-showing" class="tabcontent">

<p>Placeholder Content</p> 

</div>

<div id="coming-soon" class="tabcontent">

<p>Placeholder Content</p>

</div>

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

<p>Placeholder Content</p>

</div>

Here is the Javascript code.

<script>

  function openContent(evt, contentName) {

      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(contentName).style.display = "block";

      evt.currentTarget.className += " active";

    } 

</script>

asked Jan 1 at 2:01

sparkle

add a comment |

I have only learnt HTML & CSS so far and adapted the Javascript code from w3schools. Hence, I'm not sure what to do. Thank you.

Here is the HTML code.

<div id="tab-rows">



<div class="tab">

<button class="tablinks" onclick="openContent(event, 'now- 

showing')">Now Showing</button>

<button class="tablinks" onclick="openContent(event, 'coming- 

soon')">Coming Soon</button>

<button class="tablinks" onclick="openContent(event, 

'promotions')">Promotions</button>

</div>



<div id="now-showing" class="tabcontent">

<p>Placeholder Content</p> 

</div>

<div id="coming-soon" class="tabcontent">

<p>Placeholder Content</p>

</div>

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

<p>Placeholder Content</p>

</div>

Here is the Javascript code.

<script>

  function openContent(evt, contentName) {

      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(contentName).style.display = "block";

      evt.currentTarget.className += " active";

    } 

</script>

asked Jan 1 at 2:01

sparkle

I have only learnt HTML & CSS so far and adapted the Javascript code from w3schools. Hence, I'm not sure what to do. Thank you.

Here is the HTML code.

<div id="tab-rows">



<div class="tab">

<button class="tablinks" onclick="openContent(event, 'now- 

showing')">Now Showing</button>

<button class="tablinks" onclick="openContent(event, 'coming- 

soon')">Coming Soon</button>

<button class="tablinks" onclick="openContent(event, 

'promotions')">Promotions</button>

</div>



<div id="now-showing" class="tabcontent">

<p>Placeholder Content</p> 

</div>

<div id="coming-soon" class="tabcontent">

<p>Placeholder Content</p>

</div>

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

<p>Placeholder Content</p>

</div>

Here is the Javascript code.

<script>

  function openContent(evt, contentName) {

      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(contentName).style.display = "block";

      evt.currentTarget.className += " active";

    } 

</script>

javascript html

asked Jan 1 at 2:01

sparkle

asked Jan 1 at 2:01

sparkle

asked Jan 1 at 2:01

sparkle

asked Jan 1 at 2:01

sparkle

asked Jan 1 at 2:01

sparkle

add a comment |

2 Answers
2

active

oldest

votes

There are multiple ways of doing it.

You could use the onload in the html and call your openContent function in it.

If you would wish to do it with the javascript only you can add event listener have to pass in your openContent as the second argument document.addEventListener("DOMContentLoaded", openContent);

answered Jan 1 at 3:00

Mounik Reddy

364

Thank you! However, I am not familiar with JS at all so am unable to implement your solution successfully. Will try down the road once I learn it in my course :)

– sparkle
Jan 1 at 8:52

add a comment |

You could change:

<div id="now-showing" class="tabcontent">

to:

<div id="now-showing" class="tabcontent active">

and add this to <head>:

<style>

  .tabcontent { display: none; }

  .tabcontent.active { display: block; }

  .tablinks.active { cursor: not-allowed; }

</style>

and update your script like:

function openContent(evt, contentName) {



  var tabcontent = document.getElementsByClassName("tabcontent");

  for (var i = 0; i < tabcontent.length; i++) {

    tabcontent[i].classList.remove("active");

  }



  var tablinks = document.getElementsByClassName("tablinks");

  for (i = 0; i < tablinks.length; i++) {

    tablinks[i].classList.remove("active");

  }



  evt.currentTarget.classList.add("active");

  document.getElementById(contentName).classList.add("active");

}

https://codepen.io/anon/pen/qLVQmp

answered Jan 1 at 3:26

ram1

3,10953138

Thank you and fantastic! It works! If you don't mind helping me out with one more question: how do I make the "Now Showing" button a different colour when the page loads? At the moment, all buttons are black; if you hover or click on them it will turn grey. I would like the grey colour for "Now Showing" to appear upon loading. The CSS code for an active button is as below in my script. Thank you so much! .tab button.active { background-color: #5F5B5B; }

– sparkle
Jan 1 at 8:51

Glad to be of aid. I updated the codepen link with those new requirements.

– ram1
Jan 1 at 9:05

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
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53992609%2fdisplay-tab-content-immediately-on-page-load%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

There are multiple ways of doing it.

You could use the onload in the html and call your openContent function in it.

If you would wish to do it with the javascript only you can add event listener have to pass in your openContent as the second argument document.addEventListener("DOMContentLoaded", openContent);

answered Jan 1 at 3:00

Mounik Reddy

364

Thank you! However, I am not familiar with JS at all so am unable to implement your solution successfully. Will try down the road once I learn it in my course :)

– sparkle
Jan 1 at 8:52

add a comment |

There are multiple ways of doing it.

You could use the onload in the html and call your openContent function in it.

If you would wish to do it with the javascript only you can add event listener have to pass in your openContent as the second argument document.addEventListener("DOMContentLoaded", openContent);

answered Jan 1 at 3:00

Mounik Reddy

364

Thank you! However, I am not familiar with JS at all so am unable to implement your solution successfully. Will try down the road once I learn it in my course :)

– sparkle
Jan 1 at 8:52

add a comment |

There are multiple ways of doing it.

You could use the onload in the html and call your openContent function in it.

If you would wish to do it with the javascript only you can add event listener have to pass in your openContent as the second argument document.addEventListener("DOMContentLoaded", openContent);

answered Jan 1 at 3:00

Mounik Reddy

364

There are multiple ways of doing it.

You could use the onload in the html and call your openContent function in it.

If you would wish to do it with the javascript only you can add event listener have to pass in your openContent as the second argument document.addEventListener("DOMContentLoaded", openContent);

answered Jan 1 at 3:00

Mounik Reddy

364

answered Jan 1 at 3:00

Mounik Reddy

364

answered Jan 1 at 3:00

Mounik Reddy

364

answered Jan 1 at 3:00

Mounik Reddy

364

Thank you! However, I am not familiar with JS at all so am unable to implement your solution successfully. Will try down the road once I learn it in my course :)

– sparkle
Jan 1 at 8:52

add a comment |

Thank you! However, I am not familiar with JS at all so am unable to implement your solution successfully. Will try down the road once I learn it in my course :)

– sparkle
Jan 1 at 8:52

Thank you! However, I am not familiar with JS at all so am unable to implement your solution successfully. Will try down the road once I learn it in my course :)

– sparkle
Jan 1 at 8:52

add a comment |

You could change:

<div id="now-showing" class="tabcontent">

to:

<div id="now-showing" class="tabcontent active">

and add this to <head>:

<style>

  .tabcontent { display: none; }

  .tabcontent.active { display: block; }

  .tablinks.active { cursor: not-allowed; }

</style>

and update your script like:

function openContent(evt, contentName) {



  var tabcontent = document.getElementsByClassName("tabcontent");

  for (var i = 0; i < tabcontent.length; i++) {

    tabcontent[i].classList.remove("active");

  }



  var tablinks = document.getElementsByClassName("tablinks");

  for (i = 0; i < tablinks.length; i++) {

    tablinks[i].classList.remove("active");

  }



  evt.currentTarget.classList.add("active");

  document.getElementById(contentName).classList.add("active");

}

https://codepen.io/anon/pen/qLVQmp

answered Jan 1 at 3:26

ram1

3,10953138

Thank you and fantastic! It works! If you don't mind helping me out with one more question: how do I make the "Now Showing" button a different colour when the page loads? At the moment, all buttons are black; if you hover or click on them it will turn grey. I would like the grey colour for "Now Showing" to appear upon loading. The CSS code for an active button is as below in my script. Thank you so much! .tab button.active { background-color: #5F5B5B; }

– sparkle
Jan 1 at 8:51

Glad to be of aid. I updated the codepen link with those new requirements.

– ram1
Jan 1 at 9:05

add a comment |

You could change:

<div id="now-showing" class="tabcontent">

to:

<div id="now-showing" class="tabcontent active">

and add this to <head>:

<style>

  .tabcontent { display: none; }

  .tabcontent.active { display: block; }

  .tablinks.active { cursor: not-allowed; }

</style>

and update your script like:

function openContent(evt, contentName) {



  var tabcontent = document.getElementsByClassName("tabcontent");

  for (var i = 0; i < tabcontent.length; i++) {

    tabcontent[i].classList.remove("active");

  }



  var tablinks = document.getElementsByClassName("tablinks");

  for (i = 0; i < tablinks.length; i++) {

    tablinks[i].classList.remove("active");

  }



  evt.currentTarget.classList.add("active");

  document.getElementById(contentName).classList.add("active");

}

https://codepen.io/anon/pen/qLVQmp

answered Jan 1 at 3:26

ram1

3,10953138

Thank you and fantastic! It works! If you don't mind helping me out with one more question: how do I make the "Now Showing" button a different colour when the page loads? At the moment, all buttons are black; if you hover or click on them it will turn grey. I would like the grey colour for "Now Showing" to appear upon loading. The CSS code for an active button is as below in my script. Thank you so much! .tab button.active { background-color: #5F5B5B; }

– sparkle
Jan 1 at 8:51

Glad to be of aid. I updated the codepen link with those new requirements.

– ram1
Jan 1 at 9:05

add a comment |

You could change:

<div id="now-showing" class="tabcontent">

to:

<div id="now-showing" class="tabcontent active">

and add this to <head>:

<style>

  .tabcontent { display: none; }

  .tabcontent.active { display: block; }

  .tablinks.active { cursor: not-allowed; }

</style>

and update your script like:

function openContent(evt, contentName) {



  var tabcontent = document.getElementsByClassName("tabcontent");

  for (var i = 0; i < tabcontent.length; i++) {

    tabcontent[i].classList.remove("active");

  }



  var tablinks = document.getElementsByClassName("tablinks");

  for (i = 0; i < tablinks.length; i++) {

    tablinks[i].classList.remove("active");

  }



  evt.currentTarget.classList.add("active");

  document.getElementById(contentName).classList.add("active");

}

https://codepen.io/anon/pen/qLVQmp

answered Jan 1 at 3:26

ram1

3,10953138

You could change:

<div id="now-showing" class="tabcontent">

to:

<div id="now-showing" class="tabcontent active">

and add this to <head>:

<style>

  .tabcontent { display: none; }

  .tabcontent.active { display: block; }

  .tablinks.active { cursor: not-allowed; }

</style>

and update your script like:

function openContent(evt, contentName) {



  var tabcontent = document.getElementsByClassName("tabcontent");

  for (var i = 0; i < tabcontent.length; i++) {

    tabcontent[i].classList.remove("active");

  }



  var tablinks = document.getElementsByClassName("tablinks");

  for (i = 0; i < tablinks.length; i++) {

    tablinks[i].classList.remove("active");

  }



  evt.currentTarget.classList.add("active");

  document.getElementById(contentName).classList.add("active");

}

https://codepen.io/anon/pen/qLVQmp

answered Jan 1 at 3:26

ram1

3,10953138

answered Jan 1 at 3:26

ram1

3,10953138

answered Jan 1 at 3:26

ram1

3,10953138

answered Jan 1 at 3:26

ram1

3,10953138

Thank you and fantastic! It works! If you don't mind helping me out with one more question: how do I make the "Now Showing" button a different colour when the page loads? At the moment, all buttons are black; if you hover or click on them it will turn grey. I would like the grey colour for "Now Showing" to appear upon loading. The CSS code for an active button is as below in my script. Thank you so much! .tab button.active { background-color: #5F5B5B; }

– sparkle
Jan 1 at 8:51

Glad to be of aid. I updated the codepen link with those new requirements.

– ram1
Jan 1 at 9:05

add a comment |

Thank you and fantastic! It works! If you don't mind helping me out with one more question: how do I make the "Now Showing" button a different colour when the page loads? At the moment, all buttons are black; if you hover or click on them it will turn grey. I would like the grey colour for "Now Showing" to appear upon loading. The CSS code for an active button is as below in my script. Thank you so much! .tab button.active { background-color: #5F5B5B; }

– sparkle
Jan 1 at 8:51

Glad to be of aid. I updated the codepen link with those new requirements.

– ram1
Jan 1 at 9:05

Thank you and fantastic! It works! If you don't mind helping me out with one more question: how do I make the "Now Showing" button a different colour when the page loads? At the moment, all buttons are black; if you hover or click on them it will turn grey. I would like the grey colour for "Now Showing" to appear upon loading. The CSS code for an active button is as below in my script. Thank you so much! .tab button.active { background-color: #5F5B5B; }

– sparkle
Jan 1 at 8:51

Glad to be of aid. I updated the codepen link with those new requirements.

– ram1
Jan 1 at 9:05

add a comment |

draft saved

draft discarded

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk