Question

我被告知here不要创建单页网站。

但是，我想在this one等标签之间创建动画效果。

如果每个标签都有单独的HTML，如何做到这一点？

或许你有更好的方法......

Answer 1

是的！使用单页不好......

对我来说（只是一个理论而未经过测试），这个怎么样？

1 。制作所有页面...（index.html，about-us.html等...）。
2 。按照通常的方式制作菜单......

<ul class="menu">
     <li><a href="index.html">Home</a></li>  
     <li><a href="about-us.html">About Us</a></li>  
     <li><a href="contact.html">Contact</a></li>  
</ul>

3 。通过jQuery编辑每个＆lt; a＆gt;的href，如此

$('ul.menu a').attr('href', function(i,v){ return '#' + v })
      .click(function(){
           openTab(this.href.replace('#',''));
      })
openTab(window.location.href.replace('#','')); // call in all pages for bookmark purpose
function openTab(url){
   $('#content').slideUp();
   $.ajax({
      url: url,
      method: 'get',
      success: function(html){
         // find the content to be displayed
         $('#content').html(html.find('#content').contents())
            .slideDown(); // then animate....
      }
   })
}

希望你有这个想法..;）

Answer 2

对于顶部的每个标签（您点击的位置），您可能会有某种链接。

创建一个函数以在单击时更改选项卡;例如showTab(tab)
使用onClick事件将该功能附加到每个链接上

showTab（tabId）函数可以执行以下操作：

function showTab(tabId) {
    $('.tabs').slideUp();
    $('#' + tabId).slideDown();
}

链接可以有这样的内联onclick事件：

<a id="contactlink" href="#" onclick="showTab('contactlink'); return false;">Contact up</a>
...

如果你想要更漂亮的动画，你也可以使用jQuery .animate函数。

见这里：jQuery Effects

如何在页面之间实现动画

2 个答案: