Question

我在移动视图中使用html代码下方的标签

 <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
     $(document).ready(function(){
                $('a.tab-menu').click(function(){
                    if ( $(window).width() < 768 ) 
                   $('#tab-'+($('.tab-menu').index($(this))+1)).slideToggle("slow").siblings('div').hide('slow');
                });
            });
    </script>
    </head>

    <body>
    <h2 class="responsive-tab"><a href="#tab-1" class="tab-menu">tab 1</a></h2>
    <div id="tab-1"> content here </div>
    <h2 class="responsive-tab"><a href="#tab-2" class="tab-menu">tab 1</a></h2>
    <div id="tab-2"> content here </div>
    <h2 class="responsive-tab"><a href="#tab-3" class="tab-menu">tab 1</a></h2>
    <div id="tab-3"> <a href="#">link here</a> </div>
    </body>
    </html>

我的问题如果点击所选标签上的任何链接并转到链接，我如何保留所选标签，当我点击后退按钮时应返回选定标签

Answer 1

您可以在页面准备就绪时查看location.hash，然后在页面加载时触发该选项卡上的点击。

$(function () {
  // Let's see if there's a hash in the url...
  var hash = location.hash;

  // If there is...
  if (hash) {

    //  Find the link that has the same href value
    // as the hash and fake a click on it...
    $('a').filter(function () {
      return this.href === hash;
    }).trigger('click');
  }
});

单击浏览器后退按钮或移动后退按钮时，保持选中的选项卡

1 个答案: