使用jquery为每个类别更改页面转换

Question

如何提供页面转换，每个类别名称和数量，我的意思是当我点击办公室类别时，它会在加载时显示一个带有该名称标题的弹出式叠加层，也不用考虑类别名称，和数量，它将在PHP上做，我只需要每个过渡将显示叠加效果。

    <div class="desk-08 tab-08 mob-hide prod-nav">
            <h2 id="prod-title">Products</h2>
            <div id="shop-categories-with-links-and-totals">
            <ul class="products-nav-list">
             <li class="md-top-product-category-link "><a href="/products" cat_title="All Products" class="shop-cat-link" ajaxload="ajaxyes" slug="products" num_products="138" home_url ="/"><span class="nav-all-desktop">All</span><span class="nav-all-mobile">Products</span><span class="md-top-product-category-count"><span>138</span></span></a></li>
             <li class="md-top-product-category-link"><a href="/product-category/office/" cat_title="Office" class="shop-cat-link" ajaxload="ajaxno" slug="office" num_products="27" home_url ="h/">Office<span class="md-top-product-category-count"><span>27</span></span></a></li>
             <li class="md-top-product-category-link"><a href="/books-magazines/" cat_title="Books &amp; Magazines" class="shop-cat-link" ajaxload="ajaxno" slug="books-magazines" num_products="39" home_url ="/">Books &amp; Magazines<span class="md-top-product-category-count"><span>39</span></span></a></li>                  
             <li class="md-top-product-category-link"><a href="/product-category/home/" cat_title="Home" class="shop-cat-link" ajaxload="ajaxno" slug="home" num_products="45" home_url ="/">Home<span class="md-top-product-category-count"><span>45</span></span></a></li>
             <li class="md-top-product-category-link"><a href="/product-category/children/" cat_title="Children" class="shop-cat-link" ajaxload="ajaxno" slug="children" num_products="23" home_url ="/">Children<span class="md-top-product-category-count"><span>23</span></span></a></li>
             <li class="md-top-product-category-link"><a href="/product-category/outdoor/" cat_title="Outdoor" class="shop-cat-link" ajaxload="ajaxno" slug="outdoor" num_products="10" home_url ="/">Outdoor<span class="md-top-product-category-count"><span>10</span></span></a></li>
             <li class="nav-search-link"><a href="ajax-search" class="search" data-fancybox-type="iframe">Search</a></li>
             <li class="nav-index-link"><a href="index/">Index</a></li></ul></div>          
    </div>  

ul.products-nav-list li {
    margin-right: 12px;
    display: inline;
    float: left;
}
.navigation ul li {
    color: #8A8A8A;
    border-top: 0px none;
    display: inline-block;
}
.navigation ul li a {
    padding: 0px;
    outline: 0px none;
}
.navigation ul li a {
    line-height: 51px;
    height: 50px;
}
.navigation ul li a {
    color: #8A8A8A;
    padding: 0px;
    display: block;
    line-height: 34px;
    height: 32px;
}
.navigation ul li a .md-top-product-category-count {
    display: inline;
}
.navigation ul li a .md-top-product-category-count {
    display: none;
    color: #8A8A8A;
    vertical-align: super;
    font-size: 0.8em;
    padding: 0px 0px 0px 5px;
}

Answer 1

我可能在结构中包含一个div作为叠加层然后切换类。

div#overlay {
    height:100%;
    width:100%;
    overflow:hidden;
    display:none;
    background-color:rgba(0,0,0,0);
    -webkit-transition: background-color 600ms ease;
    -moz-transition: background-color 600ms ease;
    -ms-transition: background-color 600ms ease;
    transition: background-color 600ms ease;
}

div#overlay.active {
    display:block;
    background-color:rgba(0,0,0,.8);
}

然后你可以点击

使用.toggleClass

$('a').on('click', function(e){
  $('div#overlay').toggleClass('active');
});

注意，因为display:none;这种方法不会消失。它会消失。