引导轮播标题按钮不可点击

Posted 2023-05-08

【中文标题】引导轮播标题按钮不可点击

【英文标题】：Bootstrap carousel caption buttons are not clickable

【发布时间】：2021-06-22 14:42:02

【问题描述】：

我正在使用引导轮播构建一个页面，该页面具有段落标题和两个按钮，按钮不显示为可点击，点击时没有任何反应。

% block body %

<div id ="car-container">
<div class="container-fluid" style= "padding-right: 0px;
    padding-left: 0px;">



<div id="carousel-home" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
  <div id  = "carousel-inner">

    <div class="carousel-item active">
      <div class = "overlay-background">
    <div class="overlay">
      <img  class="d-block w-100 carousel-home-img" src="empImg1.jpg" >
     
</div>
    </div>
     <div id = "cap_one"  class="carousel-caption ">
     <div id = "cap-head">
    <h5 id ="h5">The People Award</h5>
    </div>
    <p> We have been awarded ‘The People Award’ three years running due to our high levels of customer service.</p>
    
   <a href=" path('emp_services_lettings') " target="_blank" class="btn btn-primary btn-lg btn-md"   role="button" style = "background-color:  #2b459c!important; color: #FFFFFF!important">Find a property</a>
   <button type="button" class="btn btn-primary btn-lg btn-md" style = "background-color:  #d39e00!important; color: #FFFFFF!important">Valuation</button>
  </div>
    </div>

【参考方案1】：

要使您的按钮可点击，您需要添加一个 onclick 事件，如下所示：

<button type="button" class="btn btn-primary btn-lg btn-md"
style="background-color:  #d39e00!important; color: #FFFFFF!important" 
onclick="testMe()">Valuation</button>

并在您的 javascript 中创建一个 function testMe() code you want to execute when clicked

至于你的href标签，我不确定你使用什么变量来创建路径，所以有点难以理解，但你可以像这样放置路径：

<a href="http://www.google.com" // and the rest of your code

【讨论】：

我能够通过更改标题元素的 zindex 来解决它，您的回答为想要使用 JavaScript 实现目标的人提供了很好的解决方案。谢谢。