javascript - 给页面转换每个类别用 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; 此方法不会淡出。它只会消失。