Question

I am working on a new site, using this bootstrap tutorial。
我想点击整个卡片标题，而不仅仅是它的按钮，所以我用<a>标签替换它并删除里面的按钮。

但我还想在卡片标题中包含多个其他可点击链接，它们是动态生成的<a>代码，因此我不会更改其代码类型。

我尝试将卡片标题更改为按钮，以便能够在其中添加<a>个标签，但之后我再也无法点击它们了。

希望有一些简单的创意解决方案，你可以想出html-genius（最好不要添加css，也不要js）:)）

请记住：我希望卡片标题和子链接在鼠标悬停时具有可点击鼠标图标。

我在这里插入了一些代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div>
  <div class="card">

      <button href="#" id="headingOne" 
              class="card-header mb-0 d-flex justify-content-between align-items-center" 
              data-toggle="collapse" 
              data-target="#collapseOne" 
              aria-expanded="true" 
              aria-controls="collapseOne">
          
            Some Text
            <a id="alwaysATag" href="#">Clickable Link</a>
            <a id="alwaysATag2" href="#">Clickable Link2</a>
            <a id="alwaysATag3" href="#">Clickable Link3...</a>
          
      </button>


    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim...
      </div>
    </div>

  </div>
</div>

Answer 1

只需将button替换为span，因为您无法首先将链接放在按钮中，因此您的代码将是这样的

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div>
  <div class="card">

      <span id="headingOne" 
              class="card-header mb-0 d-flex justify-content-between align-items-center" 
              data-toggle="collapse" 
              data-target="#collapseOne" 
              aria-expanded="true" 
              aria-controls="collapseOne">
          
            Some Text
            <a id="alwaysATag" href="/">Clickable Link</a>
            <a id="alwaysATag2" href="http://google.com">Clickable Link2</a>
            <a id="alwaysATag3" href="#">Clickable Link3...</a>
          
      </span>


    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim...
      </div>
    </div>

  </div>
</div>

＆＃13;

修改

使鼠标指针使用此css

a{cursor: pointer}

对于折叠卡，该怎么做而不是<a> in </a> <a>?

1 个答案: