在我的SPA网页中,我使用了juizy-slideshow ,它在其play / pause / next / prev / dots命令中滥用了css:target伪类。.而我本人则在网页中使用了更多:targets来向上滚动为了达到这个效果,我还使用了jQuery的平滑滚动插件来控制每个:target的滚动以使其平滑,并且我不得不在其上作例外,不要考虑juizy-slideshow的:target,直到这里一切正常。

这是滑块代码html部分:

  <div id="Accueil">
   <div id="s_w_wrap">
      <div id="sliderwrap">
         <div id="slider"  style="position:absolute;right:-15px;top:20px;width:60%;">
            <span id="Pause_defiler_accueil" class="sl_command">&nbsp;</span>
            <span id="Nos_services" class="sl_command sl_i">&nbsp;</span>
            <span id="Nos_references" class="sl_command sl_i">&nbsp;</span>
            <span id="Contactez_nous" class="sl_command sl_i">&nbsp;</span>                                 
            <section id="slideshow">                    
               <a class="commands prev commands1 cmdlink" href="#Contactez_nous" title="Contact">&lt;</a>
               <a class="commands next commands1 cmdlink" href="#Nos_references" title="Nos Réfs">&gt;</a>
               <a class="commands prev commands2 cmdlink" href="#Nos_services" title="Nos Services">&lt;</a>
               <a class="commands next commands2 cmdlink" href="#Contactez_nous" title="Contact">&gt;</a>
               <a class="commands prev commands3 cmdlink" href="#Nos_references" title="Nos Réfs">&lt;</a>
               <a class="commands next commands3 cmdlink" href="#Nos_services" title="Nos Services">&gt;</a>                        
               <a id="cmdpause" class="play_commands pause cmdlink" href="#Pause_defiler_accueil" title="Stopper l'animation">Pause</a>
               <a id="cmdplay" class="play_commands play cmdlink" href="#Defiler_accueil" title="Lancer l'animation">Play</a>                           
            </section>
            <div class="container">
               <div class="c_slider"></div>
               <div class="slider">
                  <figure id="servsfig">
                     <img src="images/sliderimgs/prods.jpg" alt="" width="440" height="310" />
                     <figcaption>~~ Nos services ~~</figcaption>
                  </figure>
                  <!--
                     -->
                  <figure id="refsfig">
                     <img src="images/sliderimgs/nos_references.jpg" alt="" width="440" height="310" />
                     <figcaption>~~ Nos références ~~</figcaption>
                  </figure>
                  <!--
                     -->
                  <figure id="contfig">
                     <img src="images/sliderimgs/phoneus.png" alt="" width="440" height="310" />
                     <figcaption>~~ Contactez-nous! ~~</figcaption>
                  </figure>
               </div>
            </div>
            <span id="timeline"></span>                     
            <ul class="dots_commands">
               <!--
                  -->
               <li><a class="cmdlink" title="Nos services" href="#Nos_services">Nos services</a></li>
               <!--
                  -->
               <li><a class="cmdlink" title="Nos références" href="#Nos_references">Nos références</a></li>
               <!--
                  -->
               <li><a class="cmdlink" title="Contactez-nous!" href="#Contactez_nous">Contactez-nous!</a></li>
            </ul>
            </section>  
         </div>
      </div>
   </div>
</div>

这是其CSS部分的一部分:

.sl_i:target ~ #slideshow .slider                               { visibility: hidden }
.sl_i:target ~ #slideshow .txtslider                                { visibility: hidden }
.sl_i:target ~ #slideshow .txtslider2                           { display: block } 


.sl_i:target ~ #slideshow .slider figcaption                        { visibility: hidden }
.sl_i:target ~ #slideshow .dots_commands li:first-child a:after     { display:none; }
.sl_i:target ~ #slideshow .dots_commands li:first-child a:before    { display:block; }}

#Nos_services:target ~ #slideshow .commands                             { display: none; }
#Nos_services:target ~ #slideshow .commands1                                { display: block; }
#Nos_services:target ~ #slideshow .c_slider                             { background-position: 0 0, 440px 0, 880px 0, 1320px 0; }
#Nos_services:target ~ #slideshow .txtslider2                           { left: 0}
#Nos_services:target ~ #slideshow .txtslider                            { left: 0}

#Nos_services:target ~ #slideshow .dots_commands li:first-child a:before    { left:0; }

#Nos_references:target ~ #slideshow .commands                               { display: none; }
#Nos_references:target ~ #slideshow .commands2                          { display: block; }
#Nos_references:target ~ #slideshow .c_slider                               { background-position: -440px 0, 0 0, 440px 0, 880px 0; }
#Nos_references:target ~ #slideshow .txtslider2                         { left: -100%}
#Nos_services:target ~ #slideshow .txtslider                            { left: -100%}

#Nos_references:target ~ #slideshow .dots_commands li:first-child a:before  { left:18px; }

#Contactez_nous:target ~ #slideshow .commands                               { display: none; }
#Contactez_nous:target ~ #slideshow .commands3                          { display: block; }
#Contactez_nous:target ~ #slideshow .c_slider                               { background-position: -880px 0, -440px 0, 0 0, 440px 0; }
#Contactez_nous:target ~ #slideshow .txtslider2                         { left: -200%}
#Nos_services:target ~ #slideshow .txtslider                            { left: -200%}
#Contactez_nous:target ~ #slideshow .dots_commands li:first-child a:before  { left:36px; }

这是jQuery的平滑滚动代码:

$('a[href*=#]:not([href=#], [href=#Defiler_accueil], [href=#Pause_defiler_accueil], [href=#Defiler_services], [href=#Pause_defiler_services], [href=#Defiler_references], [href=#Pause_defiler_references], [href^=#sl_i], [href=#Nos_services], [href=#Nos_references], [href=#Contactez_nous], [href=#Parquet_stratifie], [href=#Rideaux_lamelles], [href=#Moquette], [href=#Plancher_technique], [href=#Cloison_en_plaque_de_platre], [href=#Plafond_demontable], [href=#Usine_menuiserie_aluminium], [href=#Pharmacie_Ben_Youssef], [href=#PIZZA_HUT_Tunis_Mal_Lac], [href=#Tunis_Mall_Lac])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

        var target = $(this.hash);
        history.pushState('', '', '/' + this.hash.slice(1));
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});

现在我对html5 pushstate(HTML5 History API)了如指掌,我喜欢它可以使我页面的链接具有REST样式而不是丑陋的#号,然后问题开始出现:

1)[说是否正确]对于使用pushstate时的滚动目标,这完全没有问题,因为它们将所有目标均指向第一级路径(例如, http:// localhost / my-app-foldername-in- www / home / ),但pushstate删除了应用程序域名(my-app-foldername-in-www),并且我得到了类似urls的网址:localhost / home,localhost / Products。 我在这里假设稍后将应用托管在服务器中时,“ localhost”将替换为my-app-foldername-in-www,它将本身变为域名,而网址将为“ my-app-foldername-in” -www / products”,这样就不会再有问题了。

2)在几乎每个部分(/ home,/ Products ..)中,我都使用juizy-slideshow,因此在这里我想要的URL具有2级路径(例如/ Products / stuff(第二级对应于确实由CSS控制的幻灯片)选择器来触发滑动过渡,例如: #stuff:target ~ #slideshow .c_slider{ background-position: -440px 0, 0 0, 440px 0, 880px 0; } 。首先,我只是简单地替换了类的名称和标识符(最初用作href的:targets)的绝对路径,例如#Products/stuff:target ~ #slideshow .c_slider{ background-position: -440px 0, 0 0, 440px 0, 880px 0; }但是CSS(不会接受)当将它们添加到平滑滚动插件异常中时)和过渡停止工作,因此我决定保留CSS的这些类和ID名称,并在使用pushstate时在URL中使用绝对路径:

                $(".cmdlink").on("click", function(event){
                    //event.preventDefault();

                    var accu_arr = ["stuff1", "stuff2", "stuff3"];
                    var newurl = this.hash.slice(1);

                    if($.inArray( newurl, accu_arr) != '-1')
                        newurl = "Products/"+newurl;

                    console.log('cmdlink : newurl 1: '+newurl);
                    history.pushState('', '', newurl+'/');  
                });

但是它仍然不能使CSS转换正常工作,就好像CSS选择器也依赖于URL。 我该怎么办?

3)单击多个这两个双层路径命令中的一个时,我还面临另一个问题,这是每次它使积累由pushstate推送的路径时,我得到的URL类似于http:// localhost / Products / stuff1 / Products / stuff2 / Products / stuff3 / Products / stuff1 一级路径不会产生问题,而是改为更新整个url:因此,从localhost / Products传递到localhost / otherSection可以正常工作。 如何处理?

===============>>#1 票数:0

window.hashchange解决了我的问题:

        $(window).on("hashchange", function() {
                var hash = location.hash;
                //covert hash to /hash and make a newurl here..                     
                history.pushState('', '', newurl);               

        });

  ask by Bardelman translate from so

未解决问题?本站智能推荐:

2回复

HTML5历史记录APi

我如何使用HTML5历史API。 我确实通过了https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history 。 那让我困惑。 我想要的就是更改ajax调用的url,这样当用户点击后退按钮时,他就会获得之前的状态。
1回复

使用HTML5历史记录时如何处理页面刷新?

我通读了大量的教程和示例,无济于事,这使我在这里提出自己的问题。 我正在开发一个带有动态内容div的固定侧面导航的网页。 问题 当我单击链接时,例如说“加载”,内容div将显示其他页面“ loadcourses.php”中的内容,然后使用历史记录api将URL更改为“ http:/
3回复

HTML5历史记录pushState链接返回

在今天早些时候看到另一篇关于HTML5 History API的文章并阅读了Mozilla的教程之后,我已经能够实现一个基本的工作演示,该演示使用该API允许URL“重写”而无需重新加载页面且不使用哈希。 我的问题是:假设您有一个访问页面的用户,单击使用History API编写新URL的
3回复

检测是否支持HTML5历史记录

如何检查您使用的浏览器是否支持HTML5历史记录API? 正如你在这里看到的http://caniuse.com/#search=history中只有chrome + ff4和其他几个人支持这个,如果他们不支持这个,我希望做点其他事情。 如何为此检查制作某种if语句?
3回复

使用新的HTML5历史记录功能构建一个没有页面重新加载的网站

我一直在寻找一种方法来更改浏览器地址位置,而不会导致整页重新加载,因此我得到了一些有用的信息,如下所示: http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/ 并试图进入
1回复

在angularjs中使用html 5 pushstate的问题

我是Angular的新手,目前正在构建应用程序的身份验证+导航部分。 我遵循了这个有用的github条目中描述的想法。 当用户导航到应用程序时,他们会被重定向到<app>/login ,正确显示登录屏幕。 我的问题是,在我的实现中,与教程不同,当用户将URL设置为<
1回复

单页应用程序客户端和服务器路由

我有以下代码使用HTML5 pushstate(crossroadsjs和historyjs的经典组合)来处理客户端导航: 它真的很好。 现在,为了处理URL书签和共享,我添加并表示服务器以处理所有请求。 它所做的只是重定向到index.html(一种综合规则): 我面临的问
2回复

如何在HATEOAS服务器上实现深层链接客户端?

在SO上有一个类似的问题 ,但它没有说得好,而且缺乏细节。 所以我想写一个更好的问题。 我对如何使用pushState的单页面应用程序(SPA)实现HATEOAS感兴趣。 我希望保留深层链接,以便用户可以在SPA中为URL添加书签并稍后重新访问它们或与其他用户共享。 具体而
2回复

在一个非常轻量级的网站上使用Backbone.js(或任何其他框架)是一个好主意吗?

我正在开发一个Web应用程序,该应用程序将所有内容托管在CDN上,然后通过Socket.io连接到node.js服务器以实现动态变化。 该站点具有以下动态字段: 3个最新状态更新(每个文本约300个字符) 3个数值 5个按钮,它们通过Socket.io发送响应以使
1回复

Backbone.js路由器回调将在除1个特定的URL段之外的所有URL段上触发

我正在创建使用Backbonejs路由器的第一个应用程序。 http://backbonejs.org/#Router 我很好奇,是否可以定义一条会针对除一个以外的所有网址段触发的路由? 就我而言,如果网址为http://www.example.com/login ,我不