时间戳

首页 > 解决方案 > 通过JQUERY中另一个页面的链接取消隐藏div

jquery - 通过JQUERY中另一个页面的链接取消隐藏div

问题描述

我在“附件页面”中的单独隐藏 div 中有一堆附件。我希望另一个页面中的链接转到附件页面并取消隐藏该特定附件 div。我一直在玩 JQUERY 代码，但到目前为止没有任何效果。我是 JQUERY 的新手。

第1页链接：

products/accessories.html#lens

配件页面html：

                    <div class="card data lens">
                        <img class="d-block mx-auto" src="/images/products/acc/lens.jpg" alt="lens">
                      <div class="card-body">
                        <a href=#lens></a>
                        <h3>Lens cover</h3>
                        <p class="c-text">This is my lens cover</p>
                        <ul>
                          <li>It's a great lens cover</li>
                        </ul>
                      </div>
                    </div>
                    <div class="card data bag">
                      <img class="d-block mx-auto" src="/images/products/acc/bag.jpg" alt="Bag">
                      <div class="card-body">
                          <a href="#bag"></a>  
                          <h3>Camera Bag</h3>
                          <p class="c-text">Great bag!</p>
                          <ul>
                            <li>2 left in stock</li>
                          </ul>
                      </div>
                    </div>
                    <div class="card data cloth">
                      <img class="d-block mx-auto" src="/images/products/acc/cloth.jpg" alt="Cloth">
                      <div class="card-body">
                          <a href="#cloth"></a>
                          <h3>Cloth</h3>
                          <p class="c-text">Great Cloth</p>
                          <ul>
                            <li>Sizes available: in large</li>
                          </ul>
                      </div>
                    </div>

配件页面 JQUERY:

<script>
if (location.hash !== null && location.hash !== "") {
  $(location.hash + ".data").show();
}

$(document).ready(function(){
  
      $(".data").hide();
      $("." + $(this).val()).fadeIn(700);
  }).change();

标签： jquery

解决方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="card data" id="lens">
    <img class="d-block mx-auto" src="/images/products/acc/lens.jpg" alt="lens">
    <div class="card-body">
        <a class="link-to-section" href=#lens></a>
        <h3>Lens cover</h3>
        <p class="c-text">This is my lens cover</p>
        <ul>
            <li>It's a great lens cover</li>
        </ul>
    </div>
</div>
<div class="card data" id="bag">
    <img class="d-block mx-auto" src="/images/products/acc/bag.jpg" alt="Bag">
    <div class="card-body">
        <a class="link-to-section" href="#bag"></a>
        <h3>Camera Bag</h3>
        <p class="c-text">Great bag!</p>
        <ul>
            <li>2 left in stock</li>
        </ul>
    </div>
</div>
<div class="card data" id="cloth">
    <img class="d-block mx-auto" src="/images/products/acc/cloth.jpg" alt="Cloth">
    <div class="card-body">
        <a class="link-to-section" href="#cloth"></a>
        <h3>Cloth</h3>
        <p class="c-text">Great Cloth</p>
        <ul>
            <li>Sizes available: in large</li>
        </ul>
    </div>
</div>
<script
        src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous"></script>
<script type="application/javascript">
    function loadThisCard(cardID, changeTheHash=false) {
        // hide all the cards
        $('.data').hide();
        // update the hash without reloading the page
        if (changeTheHash) {
            history.pushState(null,null,cardID);
        }
        // load the correct card
        $('.data' + cardID).fadeIn(700);
    }

    $(document).ready(function() {
        // hide all the cards on load
        $('.data').hide();
        // get all of your links
        let linksArray = [];
        let currentHash = location.hash;
        console.log(currentHash);
        $('.link-to-section').each(function() {
            // add it to our array
            linksArray.push($(this).attr('href'));
        });
        // stop the page from scrolling to the anchor if it's one of your anchors, and load the card
        if (linksArray.includes(currentHash)) {
            setTimeout(function() { window.scrollTo(0, 0); }, 1);
            // load the correct card with our function
            loadThisCard(currentHash);
        }
    });

</script>

</body>
</html>

推荐阅读