html - 将内容加载到 div (jQuery)、更改 url 并从侧边栏导航进行控制

标签 html css ajax jquery

这是我的目标。我需要找到一个插件或编写一个执行以下操作的插件:

  • 点击时,从外部文件或隐藏的 div 加载内容(具有淡入效果)
  • 侧边栏导航将用于加载此内容(点击时),因此它需要能够将内容加载到自身之外的 div 中
  • 为链接的内容创建一个 url,这样我就可以直接链接到它

切入正题,我需要它具有 Chris Coyier 的 Organic Tabs 的所有功能.我有两页给你看。一个使用有机标签,另一个不使用。我无法在第二页上使用有机标签的原因是因为我不知道如何让它与#tabs div 之外的内容一起使用。也许使用该插件可以做到这一点,也许不能。以下是两个页面的链接:

  1. 包含有机标签的页面:http://ncfic.steadfastdesignfirm.com/events/event.php
  2. 需要 ajax 功能的新页面在单击侧边栏中的元素时加载内容:http://ncfic.steadfastdesignfirm.com/events-2/overview.php

澄清一下,我引用的第一个页面不需要任何帮助。那只是为了说明我希望第二个页面能够使用侧边栏导航来做什么,而不是标签结构。

更新:这是一个带有代码的 jsfiddle:http://jsfiddle.net/taylortsantles/pC2SF/ .

如有任何帮助,我们将不胜感激。如果您有任何其他问题,请告诉我。

谢谢,泰勒

最佳答案

保留 UI 部分,jquery 实现可能类似于

$('#link').click(function(){
    $('#inner').fadeOut('slow',function(){
        $('#inner').html($('#hidden').html());
        $('#inner').fadeIn('slow');
    })            
})

链接到 JSFiddle example

关于html - 将内容加载到 div (jQuery)、更改 url 并从侧边栏导航进行控制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12387959/

相关文章:

html - 如何在 100% 宽度布局中使用 CSS 定位

jquery - 如何在select中隐藏选中的元素?

jquery - AJAX loa 之后初始化 jQuery 插件

javascript - jQuery ajax 停止工作

html - 导航子菜单将主体向下推

php - esc_html 的使用有多重要以及何时应该使用它?

html - 100%固定位置叠加屏幕

html - 缺少几个像素的 css 高度

javascript - xmlHttp.responseText 为空

html - CSS3 动画幻灯片/隐藏导航影响其他元素