CODEWITHSUNDEEP
htmlcss
UI_Dev
UI_Dev

Reputation: 3427

How to change div style when it switches to another page in html?

From the below figure. I am changing the div(tab) styles based on the different page. If the control is in page 1, I am displaying the tab with red color border. Likewise, If the control is in page 2, I am displaying the tab with red color border and filling the background of page 1 with other color.

enter image description here

Here, I need to use <HR> tag to connect these page1, page2 and page3.

My output should be like this..

enter image description here

Here is my code.

index.html

<html>
<head>
<style>
.outer{
margin: 0 10%; 
padding: 50px 0; 
border: 2px solid #666666; 
}
.hidden-div
{ 
display:none;
 } 
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
function showHide(divId) {
$("#"+divId).toggle();
    }

</script>
</head>
<body>
<div id="hidethis" style="display:none">
      <hr/>
      <ons-row style="display: flex;">
      <div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; margin-left: 10%; text-align: center; line-height: 2.5;">
      Page 1
      </div>
      <div style="width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 2</div>
      <div style="width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 3</div>
      </ons-row>
      <hr/>
<div class="outer">
<div class="row" style="text-align: center;">
Page 1 Content
</div>
  </div>
  <br>
  </div>

  <div id="hidethis2" style="display:none">
  <hr/>
      <ons-row style="display: flex;">
      <div style="border: 3px solid #666666; border-radius: 7px; background-color: #666666; width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">
      Page 1
      </div>
      <div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; margin-left: 10%; text-align: center; line-height: 2.5;">Page 2</div>
      <div style="width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 3</div>
      </ons-row>
      <hr/>
<div class="outer">
<div class="row" style="text-align: center;">
Page 2 Content
</div>
  </div>
  <br>

  </div>

   <div id="hidethis3" style="display:none">
  <hr/>
      <ons-row style="display: flex;">
      <div style="border: 3px solid #6F08F2; border-radius: 7px; background-color: #6F08F2; width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">
      Page 1
      </div>
      <div style="border: 3px solid #6F08F2; border-radius: 7px; background-color: #6F08F2; width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 2</div>
      <div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; background-color: #C10000; margin-left: 10%; text-align: center; line-height: 2.5;">Page 3</div>
      </ons-row>
      <hr/>
<div class="outer">
<div class="row" style="text-align: center;">
Page 3 Content
</div>
  </div>
  <br>

  </div>


    <input type="button" onclick="showHide('hidethis')" value="First Page" /> 
  <input type="button" onclick="showHide('hidethis2')" value="Second Page"> 
    <input type="button" onclick="showHide('hidethis3')" value="Third Page"> 
</body>
</html>

Upvotes: 1

Views: 2832

Answers (1)

pbaldauf
pbaldauf

Reputation: 1681

First I would add a class on each Page like:

HTML

<div id="hidethis" class="hidden-div">...</div>
<div id="hidethis2" class="hidden-div">...</div>
<div id="hidethis3" class="hidden-div">...</div>

Then in your JS hide first all elements with class hidden-div and then make the div with the right ID appear again:

JS

function showHide(divId) {
   $('.hidden-div').each( function() {
           $(this).hide();
    });
    $("#"+divId).show();

}

Here is a Fiddle. (Perhaps you have to change the HTML-Markup a little bit).


If you want to show the Page with the ID hidethis by default add this CSS Code:

#hidethis {
    display: block;
}

This works because ID Selectors are higher rated by CSS than Class Selectors. For more information about Selectors read this article.


EDIT:

According to your comments I think you are looking for something like this.

HTML

Insert a new div where a line should be shown and remove the margin-left: 10% property on the following div's CSS.

  <div class="line"></div>
  <div style="border: 3px solid #C10000; width: 19%; border-radius: 7px;  text-align: center; line-height: 2.5;">Page 2</div>

CSS

Set width: 10% because of previous margin-left: 10%. Feel free to play with the other values.

.line {
    width: 10%;
    height: 2px;
    background: green;
   margin-top: 25px;
}

Upvotes: 3

Related Questions