Question

我有一个页面有几个可以在点击时展开/折叠的div。有些情况下，我想在一个已经扩展的某个div的锚点来到页面。

例如，一个div适用于页面中间的某个视频系列。我希望能够与某人分享链接，以便他们可以访问已固定到此视频系列的页面，其中div已经展开，以显示视频系列中的各种模块。

任何帮助表示赞赏！我尝试过几种不同的东西，但没有任何效果。

HTML：

＆＃13;

<a name="TLS"></a> 

<a data-toggle="collapse" data-parent="#accordion" href="#collapsefoundationallearning" aria-expanded="false" aria-controls="collapsefoundationallearning">Foundational Learning Video Series</a> <br>
                  
<div id="collapsefoundationallearning" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<a href="">Module 1</a>
<br><a href="">Module 2</a>
<br><a href="">Module 3</a>
</div>

＆＃13;

我尝试了这个，但无法让它发挥作用。

<script>

jQuery(document).ready(function() {
    var url = document.location.toString();
    if ( url.match('#') ) {
        var hash = url.split('#')[1];

        // collapse the expanded panel
        $('#accordion .accordion-collapse').removeClass('in');

        // expand the requested panel
        $('#' + hash).addClass('in');
    }
});
</script>

我还试图通过在链接中传递一个参数来找到一种方法来改变页面加载时bootstrap div的类，但是我空了。我已经不得不通过锚点而无法找到关于如何传递新课程的任何内容。

Answer 1

您可以使用:target使用直接CSS执行此操作。它看起来像是：

<强> HTML

<div id="video-series">
  Content Here
</div>

<强> CSS

:target {
  // styles for the target
}

然后在链接中，将#video-series添加到结尾。

使用链接展开页面加载上的某个Div

1 个答案: