Question

我有一个疑问，如果我点击它必须到demo2.html页面的链接，我可以在demo1.html页面中有一个锚标记。在demo2.html页面中，我正在使用数据过滤器，它必须选择我们可以这样做的过滤器。以下是我正在使用的示例代码

demo1.html

 <li>
    <div><a href="urunlist.html?dataType=ahsap">
    <h2>Ahşap Panel</h2>
    <p>Doğal Ağaç Görünümlü Duvar Kaplama Panelleri, Doğada var olan dokuları estetik bir incelikle
                        duvarlarınıza yansıtın. Ham ağaç olan duvarların dokusunu yeniden keşfedeceksiniz.</p>
     </a></div>
 </li>

demo2.html

<'--Tab filter-->
    <div class="build">
                <ul id="filterOptions" class="clearfix">
                    <li class="cur"><a class="Hepsi btn btn-link linear" href="#">Hepsi </a></li>
                    <li style="top:5px;"><span>/</span></li>
                    <li><a class="tas btn btn-link linear" href="#">Taş Plakalar</a></li>
                    <li><span>/</span></li>
                    <li><a class="ahsap btn btn-link linear" href="#">Ahşap Plakalar</a></li>
                    <li><span>/</span></li>
                    <li><a class="tugla btn btn-link linear" href="#">Tuğla Plakalar</a></li>
                    <li><span>/</span></li>
                    <li><a class="beton btn btn-link linear" href="#">Beton Plakalar</a></li>
                </ul>
            </div>

<!--Filter Block-->
            <ul class="container_folio clearfix gallery">



         <li class="box" data-id="id-1" data-type="tas">
                        <div class="folio-img build">
                            <div class="portfolio-item ">
                                <div class="thumbnail">
                                   <div class="thumb-img">
                                   <a href="image/tasplakalar/001-2-b.jpg" data-gal="prettyPhoto[gallery2]" title="Taş Panel Atolyesi">
                                    <img class="linear img-portfolio img-responsive" src="image/tasplakalar/001-2-b.jpg" alt="Tas Panel R-001">
                                   </a>

                                   <div class="folio-caption animated">
                                       <p>Taş Panel R-001</p>

                                   </div>
                                   </div>
                                </div>

                            </div>
                        </div>
                        </li>   
        <li class="box" data-id="id-27" data-type="ahsap">
                        <div class="folio-img build">
                            <div class="portfolio-item">
                                <div class="thumbnail">
                                    <div class="thumb-img">
                                        <a href="image/ahsapplakalar/015-b.jpg" data-gal="prettyPhoto[gallery2]"
                                           title="Taş Panel Atolyesi">
                                            <img class="linear img-portfolio img-responsive" src="image/ahsapplakalar/015-b.jpg"
                                                 alt="Ahşap Panel R-015">
                                        </a>
                                        <div class="link"><a href="#">Taş Panel Atolyesi</a></div>
                                        <div class="folio-caption">
                                            <p>Ahşap Panel R-015</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li> 
    </ul>
demo2.html javascript

    <script>
            function getParameterByName(name) {
                name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
                var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                        results = regex.exec(location.search);
                return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
            }

        </script>

        <script language="JavaScript">
            $('li.box').filter(function () {
                return $(this).attr('data-type') == getParameterByName('dataType');
            }).addClass('cur');
        </script>

enter image description here

Answer 1

是您可以在一个页面中拥有anchor，并将parameter传递给其他网页，并根据url进行过滤。

注意：确保您在第二页中有filters可用，以便您可以根据网址参数进行选择。

你没有将你的代码包装在DOM ready内，你的过滤器将无法正常工作，因为它不会找到你过滤的li，因为你的 DOM 还没有准备好。

<强>段

$(function(){
   var filter = 'ahsap'; // URL parameter
    $('li.box').each(function () {
       var type = $(this).attr("data-type"); 
      if( type == filter ){
      $(this).addClass("cur");
      }
    });
  
  $("#filterOptions li").each(function () {
       var type = $(this).find("a").attr("data-type"); 
      if( type == filter ){
      $(this).addClass("cur");
      }
    });
  });

.cur{
background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <div class="build">
                <ul id="filterOptions" class="clearfix">
                    <li><a class="Hepsi btn btn-link linear" href="#" data-type="hepsi">Hepsi </a></li>
                    <li style="top:5px;"><span>/</span></li>
                    <li><a class="tas btn btn-link linear" href="#" datat-type="tas">Taş Plakalar</a></li>
                    <li><span>/</span></li>
                    <li><a class="ahsap btn btn-link linear" href="#" data-type="ahsap">Ahşap Plakalar</a></li>
                    <li><span>/</span></li>
                    <li><a class="tugla btn btn-link linear" href="#">Tuğla Plakalar</a></li>
                    <li><span>/</span></li>
                    <li><a class="beton btn btn-link linear" href="#">Beton Plakalar</a></li>
                </ul>
            </div>

<!--Filter Block-->
            <ul class="container_folio clearfix gallery">



         <li class="box" data-id="id-1" data-type="tas">
                        <div class="folio-img build">
                            <div class="portfolio-item ">
                                <div class="thumbnail">
                                   <div class="thumb-img">
                                   <a href="image/tasplakalar/001-2-b.jpg" data-gal="prettyPhoto[gallery2]" title="Taş Panel Atolyesi">
                                    <img class="linear img-portfolio img-responsive" src="image/tasplakalar/001-2-b.jpg" alt="Tas Panel R-001">
                                   </a>

                                   <div class="folio-caption animated">
                                       <p>Taş Panel R-001</p>

                                   </div>
                                   </div>
                                </div>

                            </div>
                        </div>
                        </li>   
        <li class="box" data-id="id-27" data-type="ahsap">
                        <div class="folio-img build">
                            <div class="portfolio-item">
                                <div class="thumbnail">
                                    <div class="thumb-img">
                                        <a href="image/ahsapplakalar/015-b.jpg" data-gal="prettyPhoto[gallery2]"
                                           title="Taş Panel Atolyesi">
                                            <img class="linear img-portfolio img-responsive" src="image/ahsapplakalar/015-b.jpg"
                                                 alt="Ahşap Panel R-015">
                                        </a>
                                        <div class="link"><a href="#">Taş Panel Atolyesi</a></div>
                                        <div class="folio-caption">
                                            <p>Ahşap Panel R-015</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li> 
    </ul>

单击html中另一页面中的链接页面

1 个答案: