【问题标题】: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" alt="First slide">
     
</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>

【问题讨论】:

    标签: javascript html jquery css twitter-bootstrap


    【解决方案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 实现目标的人提供了很好的解决方案。谢谢。
    猜你喜欢
    • 2019-05-19
    • 2018-04-20
    • 2015-04-11
    • 1970-01-01
    • 2023-04-08
    • 2015-04-02
    • 2017-04-11
    • 2022-09-29
    相关资源
    最近更新 更多