加载时，Bootstrap滑块会被移除

时间：2014-10-08 13:57:22

标签： jquery html twitter-bootstrap

我的引导滑块有一个奇怪的问题，据我所知，我已经在每张幻灯片中添加了href。

我已经设置了所有内容并且它应该可以正常工作，如果我在Chrome中查看源代码，我会看到：

<div id="gallery" style="width:397px!important">

<div style="width:397px!important" id="myCarousel" class="carousel slide">

    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
        <li data-target="#myCarousel" data-slide-to="5"></li>
    </ol>

    <div class="carousel-inner">
        <div style="width:397px!important" class="active item"> <a target="_blank" href="https://www.reservon.es"> <img src="http://localhost/reservasHosteleria/central/images/dominiosRG/34/slide1.png"/></a> </div>
        <div style="width:397px!important"  class="item" <a href="http://localhost/reservasHosteleria/central/eventosPub/dealle/2"> <img src="http://localhost/reservasHosteleria/central/images/dominiosRG/2/slide2.png"/> </a> </div>
        <div  style="width:397px!important" class="item" <a target="_blank" href="www.marca.com"> <img src="http://localhost/reservasHosteleria/central/images/dominiosRG/10/slide3.png"/> </a> </div>
        <div style="width:397px!important"  class="item" <a href="http://localhost/reservasHosteleria/central/eventosPub/dealle/83"> <img src="http://localhost/reservasHosteleria/central/images/dominios/83/slide4.png"/> </a> </div>
        <div  style="width:397px!important" class="item" <a target="_blank" href="http://www.yahoo.es"> <img src="http://localhost/reservasHosteleria/central/images/dominios/20/slide5.png"/> </a> </div>
        <div style="width:397px!important"  class="item" <a href="http://localhost/reservasHosteleria/central/eventosPub/dealle/28"> <img src="http://localhost/reservasHosteleria/central/images/dominiosRG/28/slide5.png"/> </a> </div>
    </div>

  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('.carousel').carousel();
    });

</script>

但如果我使用Chrome检查器，则每个链接都没有</a>，而是第一个链接。

    <div id="gallery" style="width:397px!important">

<div style="width:397px!important" id="myCarousel" class="carousel slide">

    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
        <li data-target="#myCarousel" data-slide-to="5"></li>
    </ol>

    <div class="carousel-inner">
        <div style="width:397px!important" class="active item"> <a target="_blank" href="https://www.reservon.es"> <img src="http://localhost/reservasHosteleria/central/images/dominiosRG/34/slide1.png"/> </a></div>
        <div style="width:397px!important"  class="item" <a href="http://localhost/reservasHosteleria/central/eventosPub/dealle/2"> <img src="http://localhost/reservasHosteleria/central/images/dominiosRG/2/slide2.png"/> </div>
        <div  style="width:397px!important" class="item" <a target="_blank" href="www.marca.com"> <img src="http://localhost/reservasHosteleria/central/images/dominiosRG/10/slide3.png"/> </div>
        <div style="width:397px!important"  class="item" <a href="http://localhost/reservasHosteleria/central/eventosPub/dealle/83"> <img src="http://localhost/reservasHosteleria/central/images/dominios/83/slide4.png"/> </div>
        <div  style="width:397px!important" class="item" <a target="_blank" href="http://www.yahoo.es"> <img src="http://localhost/reservasHosteleria/central/images/dominios/20/slide5.png"/> </div>
        <div style="width:397px!important"  class="item" <a href="http://localhost/reservasHosteleria/central/eventosPub/dealle/28"> <img src="http://localhost/reservasHosteleria/central/images/dominiosRG/28/slide5.png"/> </div>
    </div>

  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('.carousel').carousel();
    });

</script>

我认为只要滑块加载就会删除其他锚定结束标记，但为什么呢？

任何想法???我无法解决它，只有第一个链接工作...：S

谢谢！

2 个答案:

答案 0 :(得分：1)

这些编码错误。您在div（.item）

的末尾缺少插入符号 
 <div style="width:397px!important"  class="item" 
 <a href="http://localhost/reservasHosteleria/central/eventosPub/dealle/2"> 
 <img src="http://localhost/reservasHosteleria/central/images/dominiosRG/2/slide2.png"/> </div>

应该是这样的：

 <div style="width:397px!important"  class="item">
 <a href="http://localhost/reservasHosteleria/central/eventosPub/dealle/2"> 
 <img src="http://localhost/reservasHosteleria/central/images/dominiosRG/2/slide2.png"/></a>
 </div>

答案 1 :(得分：0)

您在<div>中缺少结束标记。

    <div id="gallery" style="width:397px!important">

    <div style="width:397px!important" id="myCarousel" class="carousel slide">

        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
            <li data-target="#myCarousel" data-slide-to="4"></li>
            <li data-target="#myCarousel" data-slide-to="5"></li>
        </ol>

        <div class="carousel-inner">
            <div style="width:397px!important" class="active item"> <a target="_blank" href="https://www.reservon.es"> <img src="http://localhost/reservasHosteleria/central/images/dominiosRG/34/slide1.png"/></a> </div>
            <div style="width:397px!important"  class="item" <a href="http://localhost/reservasHosteleria/central/eventosPub/dealle/2"> <img src="http://localhost/reservasHosteleria/central/images/dominiosRG/2/slide2.png"/> </a> </div>
            <div  style="width:397px!important" class="item" <a target="_blank" href="www.marca.com"> <img src="http://localhost/reservasHosteleria/central/images/dominiosRG/10/slide3.png"/> </a> </div>
            <div style="width:397px!important"  class="item" <a href="http://localhost/reservasHosteleria/central/eventosPub/dealle/83"> <img src="http://localhost/reservasHosteleria/central/images/dominios/83/slide4.png"/> </a> </div>
            <div  style="width:397px!important" class="item" <a target="_blank" href="http://www.yahoo.es"> <img src="http://localhost/reservasHosteleria/central/images/dominios/20/slide5.png"/> </a> </div>
            <div style="width:397px!important"  class="item" <a href="http://localhost/reservasHosteleria/central/eventosPub/dealle/28"> <img src="http://localhost/reservasHosteleria/central/images/dominiosRG/28/slide5.png"/> </a> </div>
        </div>

      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $('.carousel').carousel();
        });

    </script>
相关问题
最新问题