堆棧內存溢出
  簡體   English   中英

為什么我的JavaScript沒有加載到Bootstrap選項卡中？

[英]Why isn't my JavaScript loading in Bootstrap tabs?

 原文  2017-10-26 16:12:56  3   1    javascript/ jquery/ laravel-5.4/ bootstrap-4/ slick.js

問題描述

我有一個網站，該網站在刀片服務器模板上包含Bootstrap 4選項卡。 我的問題是，選項卡中有選項卡，當我單擊一個選項卡時，其他選項卡不會加載我創建的Slicks Javascript插件。 僅當我單擊幻燈片的箭頭時，幻燈片才能正常工作，但是我想在頁面加載時加載所有內容，而不是在單擊幻燈片時加載。 

<div class="col-md-7">
<ul class="nav nav-tabs nav-justified nav-cptec">
  <li class="nav-item">
    <a class="d-flex align-items-center align-middle justify-content-center nav-link active" data-toggle="tab" href="#condicaoRegiao" role="tab">Tempo</a>
  </li>
  <li class="nav-item">
    <a class="d-flex align-items-center align-middle justify-content-center nav-link" data-toggle="tab" href="#maxima" role="tab">M&aacute;ximas</a>
  </li>
  <li class="nav-item">
    <a class="d-flex align-items-center align-middle justify-content-center nav-link" data-toggle="tab" href="#minima" role="tab">M&iacute;nimas</a>
  </li>
  <li class="nav-item">
    <a class="d-flex align-items-center align-middle justify-content-center nav-link" data-toggle="tab" href="#aviso" role="tab">Aviso</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane" id="maxima" role="tabpanel">
    <ul class="nav nav-tabs nav-cptec nav-justified d-flex justify-content-center" id="tabs-regiao">
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle nav-link active" data-toggle="tab" href="#brasilMaxima" role="tab">Brasil</a>
      </li>
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#centro-oesteMaxima" role="tab">Centro-Oeste</a>
      </li>
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#nordesteMaxima" role="tab">Nordeste</a>
      </li>
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#norteMaxima" role="tab">Norte</a>
      </li>
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#sudesteMaxima" role="tab">Sudeste</a>
      </li>
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#sulMaxima" role="tab">Sul</a>
      </li>
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle justify-content-center nav-link" data-toggle="tab" href="#menuVale" role="tab">Vale do Para&iacute;ba</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="brasilMaxima" role="tabpanel">
        <div class="condicaoRegiao-slider mt-2">
          @for($i = 1; $i <=6; $i++)
            <div class="text-center">
              <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
                <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/brtx{{ $i }}.jpg" title="M&aacute;ximas Brasil" alt="M&aacute;ximas Brasil" class="img-fluid rounded mx-auto align-middle">
              </a>
            </div>
          @endfor
        </div>
      </div>
      <div class="tab-pane" id="centro-oesteMaxima" role="tabpanel">
        <div class="condicaoRegiao-slider mt-2">
          @for($i = 1; $i <= 6; $i++)
            <div class="text-center">
            <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
              <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/coe_regtx{{ $i }}.jpg" title="M&aacute;ximas Centro Oeste" alt="M&aacute;ximas Centro Oeste" class="img-fluid rounded mx-auto align-middle">
            </a>
          </div>
          @endfor

        </div>
      </div>
      <div class="tab-pane" id="nordesteMaxima" role="tabpanel">
        <div class="condicaoRegiao-slider mt-2">
          @for($i = 1; $i <= 6; $i++)
            <div class="text-center">
              <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
                <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/nde_regtx{{ $i }}.jpg" title="M&aacute;ximas Nordeste" alt="M&aacute;ximas Nordeste" class="img-fluid rounded mx-auto align-middle">
              </a>
            </div>
          @endfor
        </div>
      </div>
      <div class="tab-pane" id="norteMaxima" role="tabpanel">
        <div class="condicaoRegiao-slider mt-2">
          @for($i = 1; $i <= 6; $i++)
            <div class="text-center">
              <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
                <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/nor_regtx{{ $i }}.jpg" title="M&aacute;ximas Norte" alt="M&aacute;ximas Norte" class="img-fluid rounded mx-auto align-middle">
              </a>
            </div>
          @endfor
        </div>
      </div>
      <div class="tab-pane" id="sudesteMaxima" role="tabpanel">
        <div class="condicaoRegiao-slider mt-2">
          @for($i = 1; $i <= 6; $i++)
            <div class="text-center">
              <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
                <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/sud_regtx{{ $i }}.jpg" title="M&aacute;ximas Sudeste" alt="M&aacute;ximas Sudeste" class="img-fluid rounded mx-auto align-middle">
              </a>
            </div>
          @endfor
        </div>
      </div>
      <div class="tab-pane" id="sulMaxima" role="tabpanel">
        <div class="condicaoRegiao-slider mt-2">
          @for($i = 1; $i <= 6; $i++)
            <div class="text-center">
              <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
                <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/sul_regtx{{ $i }}.jpg" title="M&aacute;ximas Sul" alt="M&aacute;ximas Sul" class="img-fluid rounded mx-auto align-middle">
              </a>
            </div>
          @endfor
        </div>
      </div>
    </div>
  </div>
  <div class="tab-pane" id="minima" role="tabpanel">
    <ul class="nav nav-tabs nav-justified nav-cptec d-flex justify-content-center" id="tabs-regiao">
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle nav-link active" data-toggle="tab" href="#brasilMinima" role="tab">Brasil</a>
      </li>
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#centro-oesteMinima" role="tab">Centro-Oeste</a>
      </li>
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#nordesteMinima" role="tab">Nordeste</a>
      </li>
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#norteMinima" role="tab">Norte</a>
      </li>
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#sudesteMinima" role="tab">Sudeste</a>
      </li>
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#sulMinima" role="tab">Sul</a>
      </li>
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle justify-content-center nav-link" data-toggle="tab" href="#menuVale" role="tab">Vale do Para&iacute;ba</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="brasilMinima" role="tabpanel">
        <div class="condicaoRegiao-slider mt-2">
          @for($i = 1; $i <= 6; $i++)
            <div class="text-center">
              <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
                <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/brti{{ $i }}.jpg" title="M&iacute;nimas Brasil" alt="M&iacute;nimas Brasil" class="img-fluid rounded mx-auto align-middle">
              </a>
            </div>
          @endfor
        </div>
      </div>
      <div class="tab-pane" id="centro-oesteMinima" role="tabpanel">
        <div class="condicaoRegiao-slider mt-2">
          @for($i = 1; $i <= 6; $i++)
            <div class="text-center">
              <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
                <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/coe_regti{{ $i }}.jpg" title="M&iacute;nimas Centro Oeste" alt="M&iacute;nimas Centro Oeste" class="img-fluid rounded mx-auto align-middle">
              </a>
            </div>
          @endfor
        </div>
      </div>
      <div class="tab-pane" id="nordesteMinima" role="tabpanel">
        <div class="condicaoRegiao-slider mt-2">
          @for($i = 1; $i <= 6; $i++)
            <div class="text-center">
              <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
                <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/nde_regti{{ $i }}.jpg" title="M&iacute;nimas Nordeste" alt="M&iacute;nimas Nordeste" class="img-fluid rounded mx-auto align-middle">
              </a>
            </div>
          @endfor
        </div>
      </div>
      <div class="tab-pane" id="norteMinima" role="tabpanel">
        <div class="condicaoRegiao-slider mt-2">
          @for($i = 1; $i <= 6; $i++)
            <div class="text-center">
              <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
                <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/nor_regti{{ $i }}.jpg" title="M&iacute;nimas Norte" alt="M&iacute;nimas Norte" class="img-fluid rounded mx-auto align-middle">
              </a>
            </div>
          @endfor
        </div>
      </div>
      <div class="tab-pane" id="sudesteMinima" role="tabpanel">
        <div class="condicaoRegiao-slider mt-2">
          @for($i = 1; $i <= 6; $i++)
            <div class="text-center">
              <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
                <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/sud_regti{{ $i }}.jpg" title="M&iacute;nimas Sudeste" alt="M&iacute;nimas Sudeste" class="img-fluid rounded mx-auto align-middle">
              </a>
            </div>
          @endfor
        </div>
      </div>
      <div class="tab-pane" id="sulMinima" role="tabpanel">
        <div class="condicaoRegiao-slider mt-2">
          @for($i = 1; $i <= 6; $i++)
            <div class="text-center">
              <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
                <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/sul_regti{{ $i }}.jpg" title="M&iacute;nimas Sul" alt="M&iacute;nimas Sul" class="img-fluid rounded mx-auto align-middle">
              </a>
            </div>
          @endfor
        </div>
      </div>
    </div>
  </div>
  <div class="tab-pane" id="aviso" role="tabpanel">Aviso</div>
  <div class="tab-pane active" id="condicaoRegiao" role="tabpanel">
    <ul class="nav nav-tabs nav-cptec d-flex justify-content-center" id="tabs-regiao">
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle nav-link active" data-toggle="tab" href="#brasil" role="tab">Brasil</a>
      </li>
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#centro-oeste" role="tab">Centro-Oeste</a>
      </li>
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#nordeste" role="tab">Nordeste</a>
      </li>
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#norte" role="tab">Norte</a>
      </li>
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#sudeste" role="tab">Sudeste</a>
      </li>
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#sul" role="tab">Sul</a>
      </li>
      <li class="nav-item">
        <a class="d-flex align-items-center align-middle justify-content-center nav-link" data-toggle="tab" href="#menuVale" role="tab">Vale do Para&iacute;ba</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="brasil" role="tabpanel">
        <div class="condicaoRegiao-slider mt-2">
          @for($i = 1; $i <= 6; $i++)
            <div class="text-center">
              <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
                <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//br{{ $i }}.jpg" title="Condiç&atilde;o de tempo Brasil" alt="Condiç&atilde;o de tempo Brasil" class="img-fluid rounded mx-auto align-middle">
              </a>
            </div>
          @endfor
        </div>
      </div>
      <div class="tab-pane" id="centro-oeste" role="tabpanel">
        <div class="condicaoRegiao-slider mt-2">
          @for($i = 1; $i <= 6; $i++)
            <div class="text-center">
              <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
                <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//coe_reg{{ $i }}.jpg" title="Condiç&atilde;o de tempo Centro Oeste" alt="Condiç&atilde;o de tempo Centro Oeste" class="img-fluid rounded mx-auto align-middle">
              </a>
            </div>
          @endfor
        </div>
      </div>
      <div class="tab-pane" id="nordeste" role="tabpanel">
        <div class="condicaoRegiao-slider mt-2">
          @for($i = 1; $i <= 6; $i++)
          <div class="text-center">
            <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
              <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//nor_reg{{ $i }}.jpg" title="Condiç&atilde;o de Tempo Nordeste" alt="Condiç&atilde;o de Tempo Nordeste" class="img-fluid rounded mx-auto align-middle">
            </a>
          </div>
          @endfor
        </div>
      </div>
      <div class="tab-pane" id="norte" role="tabpanel">
        <div class="condicaoRegiao-slider mt-2">
          <div class="text-center">
            <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
              <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//nde_reg1.jpg" title="An&aacute;lise Sin&oacute;tica 24h" alt="Condiç&atilde;o br1" class="img-fluid rounded mx-auto align-middle">
            </a>
          </div>
          <div class="text-center">
            <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
                <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//nde_reg2.jpg" title="An&aacute;lise Sin&oacute;tica 24h" alt="Condiç&atilde;o br2" class="img-fluid rounded mx-auto align-middle">
            </a>
          </div>
          <div class="text-center">
            <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
              <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//nde_reg3.jpg" title="An&aacute;lise Sin&oacute;tica 24h" alt="Condiç&atilde;o br3" class="img-fluid rounded mx-auto align-middle">
            </a>
          </div>
          <div class="text-center">
            <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
              <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//nde_reg4.jpg" title="An&aacute;lise Sin&oacute;tica 24h" alt="Condiç&atilde;o br4" class="img-fluid rounded mx-auto align-midle">
            </a>
          </div>
          <div class="text-center">
            <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
              <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//nde_reg5.jpg" title="An&aacute;lise Sin&oacute;tica 24h" alt="Condiç&atilde;o br5" class="img-fluid rounded mx-auto align-midle">
            </a>
          </div>
          <div class="text-center">
            <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
              <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//nde_reg6.jpg" title="An&aacute;lise Sin&oacute;tica 24h" alt="Condiç&atilde;o br6" class="img-fluid rounded mx-auto align-midle">
            </a>
          </div>
        </div>
      </div>
      <div class="tab-pane" id="sudeste" role="tabpanel">
        <div class="condicaoRegiao-slider mt-2">
          @for($i = 1; $i <= 6; $i++)
            <div class="text-center">
              <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
                <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//sud_reg{{ $i }}.jpg" title="Condiç&atilde;o de Tempo Sudeste" alt="Condiç&atilde;o de Tempo Sudeste" class="img-fluid rounded mx-auto align-middle">
              </a>
            </div>
          @endfor
        </div>
      </div>
      <div class="tab-pane" id="sul" role="tabpanel">
        <div class="condicaoRegiao-slider mt-2">
          @for($i = 1; $i <= 6; $i++)
            <div class="text-center">
              <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links">
                <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//sul_reg{{ $i }}.jpg" title="Condiç&atilde;o de tempo Sul" alt="Condiç&atilde;o de Tempo Sul" class="img-fluid rounded mx-auto align-middle">
              </a>
            </div>
          @endfor
        </div>
      </div>
      <div class="tab-pane" id="menuVale" role="tabpanel">
        <a href="#" data-toggle="modal" data-target="#modalVale"><img src="{{ getThumbnail('http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/vale_paraiba/mapa_vale.jpg', 430, 430, array(430, 430, 0, 0), 'resize') }}" title="An&aacute;lise Sin&oacute;tica 24h" alt="Condiç&atilde;o br1" class="img-fluid rounded mx-auto align-middle"></a>
      </div>
    </div>
    <div class="p-2 text-align-left links"><a href="#" data-toggle="modal" data-target="#legendaCondicao"><small>» Legenda</small></a></div>
  </div>
</div>


$(".condicaoRegiao-slider").slick({
  infinite: false,
  speed: 0,
  slidesToShow: 1,
  slidesToScroll: 1,
  prevArrow: "<i class='fa fa-chevron-left slick-prev flecha-esquerda'></i>",
  nextArrow: "<i class='fa fa-chevron-right slick-next flecha-direita'></i>",
  responsive: [
    {
      breakpoint: 600,
      settings: {
          slidesToShow: 1,
          slidesToScroll: 1
      }
    }
  ]
});

1 個解決方案

解決方案1
 0  2017-11-10 16:31:34

使用這個漂亮的function（）解決了問題 

slick('setPosition', 0)

光滑的文檔

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Javascript標簽：為什么我的標簽內容沒有顯示？ 為什么我的javascript插件中沒有加載我的JavaScript？ 為什么Ghost.py沒有加載/運行我的Javascript？ AJAX：為什么我的javascript沒有加載內容？ 為什么我的Bootstrap 4標簽沒有停用？ 我的JavaScript文件未在WordPress中加載 Express為何不使用JavaScript進行引導？ 為什么我的 json 數據不能使用 javascript 以正確的順序加載？ 為什么我的JavaScript循環不起作用？ JavaScript：為什么我的時鍾不工作？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM