CODEWITHSUNDEEP
htmlcss
Mamen
Mamen

Reputation: 1436

how to target outer div based on url

I have html script like :

<html>
     <head></head>
     <body>
        <div id="div1"></div>

        <div id="div2"></div>
     </body>
</html>

then I want to access the div by url, if url is:

example.com#div1

I want to hide div2 and if url is:

example.com#div2

then I want to hide div1

How do I solve that with css?

Upvotes: 2

Views: 195

Answers (3)

Saurabh Bayani
Saurabh Bayani

Reputation: 3520

It is possible through CSS using pseudo selector

<html>
 <head>
    <style type="text/css">
    .my-div {
        background-color: green;
        display: none;
        height: 100px;
        width: 100px;
    }
    .my-div:target {
        display: block;
    }
    </style>
 </head>
 <body>
    <div id="div1" class="my-div">Div 1</div>
    <div id="div2" class="my-div">Div 2</div>           
 </body></html>

Make sure you always hit with #div1 in url e.g. example.com/#div1 or example.com/#div2 else it will show blank page

Upvotes: 2

Rounin
Rounin

Reputation: 29491

How to target outer div based on url?

The CSS pseudo-class :target is perfectly suited to this:

div {
float:left;
width: 300px;
height: 150px;
}

#div1, #div2 {
display:none;
line-height: 150px;
color: rgb(255,255,255);
font-size: 72px;
text-align: center;
font-weight: bold;
}

#div1 {
background-color: rgb(255,0,0);
}

#div2 {
background-color: rgb(0,0,255);
}

#div1:target, #div2:target {
display:block;
}
<div>
<p><a href="#div1">Display Div1 (but not Div 2)</a></p>
<p><a href="#div2">Display Div2 (but not Div 1)</a></p>
</div>

<div id="div1">Div 1</div>
<div id="div2">Div 2</div>

Upvotes: 0

Joe Roberts
Joe Roberts

Reputation: 99

I did this recently, don't think you can do with CSS only.

this will load correct div on page load, including when the user uses back in browser.

<script>
    $(document).ready(function() {
      if (window.location.hash) {
        var hash = window.location.hash.substring(1);
        changeTab(hash);
      }
      else {
        changeTab('div1');
      }
    });

  function changeTab(divNo) {
    $('.divclass').hide();
    $('#' + divNo).show();
    window.location.hash = '#'+divNo;
  }

</script>

if you use a button to change divs just use:

onclick="changeTab('div1');"

set your div's class attribute to a type like 'divclass'

Upvotes: 1

Related Questions