时间戳

首页 > 解决方案 > 如何打开

在 URL 中使用 id 时

html - 如何打开
在 URL 中使用 id 时

问题描述

我正在使用 Bootstrap 的手风琴制作一个常见问题解答网站。

<!-- Card 1 -->
    <div class="card">
      <div class="card-header" id="headingOne">
        <h2 class="mb-0">
          <button class="btn btn-link btn-block text-left"
                  id="how"
                  type="button" 
                  data-toggle="collapse" 
                  data-target="#collapseOne" 
                  aria-expanded="false" 
                  aria-controls="collapseOne">
                  How?
                  <i class="fa fa-angle-down float-right"></i>
          </button>
        </h2>
      </div>
  
      <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#faq">
        <div class="card-body mr-3 ml-3">
          Lorem Ipsum
        </div>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="card">
      <div class="card-header" id="headingTwo">
        <h2 class="mb-0">
          <button class="btn btn-link btn-block text-left collapsed"
                  id="why"
                  type="button" 
                  data-toggle="collapse" 
                  data-target="#collapseTwo" 
                  aria-expanded="false" 
                  aria-controls="collapseTwo">
                  Why?
                  <i class="fa fa-angle-down float-right"></i>
          </button>
        </h2>
      </div>
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#faq">
        <div class="card-body mr-3 ml-3">
          Lorem Ipsum
        </div>
      </div>
    </div>

默认情况下，div 是关闭的。我希望能够使用以下 URL：mywebsite.com/faq#how 并且当我执行此 URL 时，我希望 div 自动打开。如何做到这一点？提前致谢。

标签： htmljquerycsstwitter-bootstrapurl

解决方案

你可以这样做：

var url = "mywebsite.com/faq#how";
var hash = url.substring(url.indexOf('#')+1);
$('button#'+hash).trigger("click")

url只需用类似的东西替换字符串window.location；

演示

var url = "mywebsite.com/faq#how";
var hash = url.substring(url.indexOf('#')+1);
$('button#'+hash).trigger("click")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
  <div class="card-header" id="headingOne">
    <h2 class="mb-0">
      <button class="btn btn-link btn-block text-left" id="how" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                  How?
                  <i class="fa fa-angle-down float-right"></i>
          </button>
    </h2>
  </div>

  <div id="collapseOne" class="collapse" aria-labelledby="headingOne">
    <div class="card-body mr-3 ml-3">
      Lorem Ipsum
    </div>
  </div>
</div>

<!-- Card 2 -->
<div class="card">
  <div class="card-header" id="headingTwo">
    <h2 class="mb-0">
      <button class="btn btn-link btn-block text-left collapsed" id="why" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  Why?
                  <i class="fa fa-angle-down float-right"></i>
          </button>
    </h2>
  </div>
  <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
    <div class="card-body mr-3 ml-3">
      Lorem Ipsum
    </div>
  </div>
</div>

推荐阅读