个人中心
gpt4 book ai didi

javascript 未在我的 html 页面上执行 - 试图保持引导 Accordion 状态

转载 作者：行者123 更新时间：2023-11-30 13:56:26 25 4
gpt4 key购买 nike

我正在使用 Bootstrap 4 Accordion 、卡片和 collpase 类在我的 html 页面上创建 Accordion 。这很好用。

我遇到的困难是在离开然后返回到我的页面时保持 Accordion 的状态。从提供的代码中可以看出， Accordion 中的第一张卡片默认展开。第二张卡片有指向 Google 主页的链接。当我展开此卡片并单击 Google 链接时，我希望它将我带到 Google 主页，它确实做到了。但是当我单击后退按钮时，我希望它返回到我的页面，其中 Accordion 的卡片 2 已展开。实际发生的是，它显示带有展开的卡片 1 的 Accordion ，即，就好像它是第一次加载页面一样。

我在 html 的底部添加了一些 JavaScript，这调用了 js 文件中的一组方法(在我的 html 的顶部和底部引用)。我希望这能解决上面详述的问题。为了方便测试，html文件和js文件在同一个目录下。

function restoreAccordionPanel(storageKey, accordionId) {
  alert("This is alert box!");
  var activeItem = localStorage.getItem(storageKey);
  if (activeItem) {
    //remove default collapse settings
    $(accordionId + " .panel-collapse").removeClass('in');

    //show the account_last visible group
    $("#" + activeItem).addClass("in");
  }
}

function restoreActiveTab(storageKey, tabId) {
  var activeItem = localStorage.getItem(storageKey);
  if (activeItem) {
    $(tabId + ' a[href="' + activeItem + '"]').tab('show');
  }
}

function saveActiveAccordionPanel(storageKey, e) {
  alert("This is alert box!");
  localStorage.setItem(storageKey, e.target.id);
}

function saveActiveTab(storageKey, e) {
  localStorage.setItem(storageKey, $(e.target).attr('href'));
}
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"></script>
  <script src="./bootstrapHelpers.js"></script>
</head>

<body>
  <button onclick="alert()">Show alert dialog</button>
  <div class="accordion" id="accordionExample">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
          </button>
        </h5>
      </div>
      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
        <div class="card-body">
          Anim pariatur cliche reprehenderit.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingTwo">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
          </button>
        </h5>
      </div>
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
        <div class="card-body">
          Sunt aliqua put a bird on it squid single-origin <a href='http://www.google.com'>google</a> nulla assumenda shoreditch et.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingThree">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            Collapsible Group Item #3
          </button>
        </h5>
      </div>
      <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
        <div class="card-body">
          Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
          labore sustainable VHS.
        </div>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="./bootstrapHelpers.js"></script>
  <script>
    $(function() {
        $('#accordion').on('shown.bs.collapse', function(e) {
          alert("This is alert box!");
          saveActiveAccordionPanel('accordion-activePanel', e);
        })
      )
    };
    restoreAccordionPanel('accordion-activePanel', '#accordion');
  </script>
</body>

</html>

但是，我的 JavaScript 函数似乎没有被调用。为了进一步测试这一点，我添加了一些警报语句，但这些语句没有显示。我可以看到 JavaScript 已正常启用，因为我已从 html 页面顶部的简单按钮的 onclick 方法成功调用警报。

我对 JavaScript 缺乏经验，我认为 JS 代码和/或我引用或调用它的方式一定有问题。如果有任何想法或指导，我将不胜感激!

最佳答案

当具体accordion打开它添加类 show到 div 并打开单击的选项卡。要保存打开的选项卡，请将点击监听器添加到 a包含在 accordian 中然后获取具有类 show 的元素, 得到 id该元素并存储在 localStorage 中.在页面加载时，检索存储的 id并获得一个具有此 id 的元素.添加前 show对此元素进行分类，删除 show所有类(class) div s 并添加 show过滤后的 div .

以下代码是所需的附加代码-

$('a').on('click',function() {
    const activeEleId = $('.accordion div').filter('.show').attr('id');
    saveActiveTab('active', activeEleId);
});

$( document ).ready( function() {
    const lastActiveTabID = localStorage.getItem('active');
    $('.accordion div[id]').removeClass('show');
    $('.accordion').find('#' + lastActiveTabID).addClass('show');
});

由于sandboxing ，代码在片段中不起作用。以下是完整代码。

function restoreAccordionPanel(storageKey, accordionId) {
  // alert("This is alert box!");
  var activeItem = localStorage.getItem(storageKey);
  if (activeItem) {
    //remove default collapse settings
    $(accordionId + " .panel-collapse").removeClass('in');

    //show the account_last visible group
    $("#" + activeItem).addClass("in");
  }
}

function restoreActiveTab(storageKey, tabId) {
  var activeItem = localStorage.getItem(storageKey);
  if (activeItem) {
    $(tabId + ' a[href="' + activeItem + '"]').tab('show');
  }
}

function saveActiveAccordionPanel(storageKey, e) {
  // alert("This is alert box!"); 
  localStorage.setItem(storageKey, e.target.id);
}

function saveActiveTab(storageKey, e) {
  localStorage.setItem(storageKey, e);
}

$('#accordion').on('shown.bs.collapse', function(e) {
  alert("This is alert box!");
  saveActiveAccordionPanel('accordion-activePanel', e);
});

restoreAccordionPanel('accordion-activePanel', '#accordion');

// Added Code
$('a').on('click', function() {
  const activeEleId = $('.accordion div').filter('.show').attr('id');
  saveActiveTab('active', activeEleId);
});

$(document).ready(function() {
  const lastActiveTabID = localStorage.getItem('active');
  $('.accordion div[id]').removeClass('show');
  $('.accordion').find('#' + lastActiveTabID).addClass('show');
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<button onclick="alert()">Show alert dialog</button>
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Collapsible Group Item #1
                </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Collapsible Group Item #2
                </button>
      </h5>
    </div>
    <!-- show -->
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Sunt aliqua put a bird on it squid single-origin <a href='http://www.google.com'>google</a> nulla assumenda shoreditch et.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  Collapsible Group Item #3
                </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
        labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

关于javascript 未在我的 html 页面上执行 - 试图保持引导 Accordion 状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57200423/

25 4 0
文章推荐： ios - UIbutton iOS 的圆角 - Swift
文章推荐： javascript - 如何修复 "no-param-reassign"eslint 错误？
文章推荐： c# - 如何在另一个线程填充它时枚举 IEnumerable
文章推荐： javascript - 在 ReactJS 中添加指向 Font Awesome 图标的链接
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com