Question

我有html脚本，如：

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

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

然后我想通过url访问div，如果url是：

example.com＃DIV1

我想要隐藏div2，如果网址是：

example.com＃DIV2

然后我想要隐藏div1

如何使用css来解决这个问题？

Answer 1

可以通过CSS使用伪选择器

<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>

确保您始终在网址中点击#div1，例如example.com/#div1或example.com/#div2否则会显示空白页

Answer 2

我最近这样做了，不要以为你只能用CSS做。

这将在页面加载时加载正确的div，包括用户在浏览器中使用的时间。

<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>

如果您使用按钮更改div，请使用：

onclick="changeTab('div1');"

将div的class属性设置为类似＆＃39; divclass＆＃39;

Answer 3

如何根据网址定位外部div？

CSS伪类:target完全适用于此：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何根据url定位外部div

3 个答案: