Question

我创建了一个页面，其中该页面包含菜单栏作为标签。

我的网址是mydomain.com/UI/ID=2?#about

各个＃的位置，其他标签就像照片，评论和设置一样。

当我重新加载任何其他标签，例如mydomain.com/UI/ID=2?#comment时，它会转到标签分数秒，然后它将再次回到尊重评论部分。

这是我的代码

<script type="text/javascript">
$(document).ready(function() {
    $(".menu_content").hide();
    var tabvalue=document.location.hash;
    var activetab=$(this).find("a").attr("href")
    $(".menu_content"+tabvalue).show();
    //$(".menu_content:first").show();
    $("ul.menu li:first").addClass("active");
    $("ul.menu li").click(function() {
    var activeTab = $(this).attr("rel"); 

              $("ul.menu li").removeClass("active");
        $(this).addClass("active");
        $(".menu_content").hide();

        $("#"+activeTab).fadeIn(); 
    });
var firstLi  = $("ul.menu li:first").attr('rel');
    if('#' + firstLi !== tabvalue) {
        $("ul.menu li:first").removeClass('active');
        $('li[rel="'+tabvalue.substring(1)+'"]').addClass('active');
    }

});
</script>

其中menu_content是所有标签的类名。

任何人都可以指导我如何解决这个问题。

Answer 1

听起来你在整个页面加载后运行这段代码，因此当HTML呈现为默认状态时，你会得到一个闪存，然后在代码执行后呈现更改后的版本。

最好的方法是不为此使用哈希，而是在URL中使用页面，即mydomain.com/UI/?ID=2&page=about并使用服务器端代码正确呈现它第一次，然后使用JavaScript中的history.pushState更新URL。

但如果这是一个基于JavaScript的页面，那么我会说最简单的方法是默认情况下让所有选项卡“处于非活动状态”，然后在加载页面时只添加“活动”类（或者到哈希值，或默认为“约”。

示例：

风格

<style type="text/css">
  .menu_content .panel {
    display:none;
  }
</style>

脚本

<script type="text/javascript">
$(document).ready(function() {

    //if there's a hash, get it but remove the hash, or use 'about' as a default
    var selectedTab = document.location.hash ? document.location.hash.replace("#", "") : "about";
    $("li#" + selectedTab).addClass("active");
    $("#" + selectedTab + "_panel").show();

    $("ul.menu li").on('click', function() {

      $("ul.menu li").removeClass("active");
      $(this).addClass("active");
      $(".panel").hide();
      $("#" + $(this).attr("id") + "_panel").show();

    });

});
</script>

HTML

<ul class="menu">
  <li id="about"><a href="#about">About</a></li>
  <li id="comment"><a href="#comment">Comment</a></li>
  <li id="contact"><a href="#contact">Contact</a></li>
</ul>

<div class="menu_content">
  <div id="about_panel" class="panel"></div>
  <div id="comment_panel" class="panel"></div>
  <div id="contact_panel" class="panel"></div>
</div>

在加载页面上将转到第一个选项卡

1 个答案: