【问题标题】:Load content into div (jQuery), change url, and control from sidebar nav将内容加载到 div (jQuery)、更改 url 并从侧边栏导航控制
【发布时间】:2012-09-12 12:15:02
【问题描述】:

这是我的目标。我需要找一个插件或者写一个插件来做以下事情:

  • 点击时,从外部文件或隐藏的 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/

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

谢谢,泰勒

【问题讨论】:

  • 听起来您正在寻找三个不同问题的解决方案。在 SO 上搜索每个问题,我相信你会弄清楚如何去做。或者你可以下载有机标签插件并重写它以满足你的需要。
  • 我明白了。有没有办法让我使用有机标签,但让它适用于它的 div 之外的东西?我的问题是我不知道如何编辑 jQuery,所以当我想自定义一些东西时我有点迷失了。
  • 当然,希望源代码有很好的文档记录,这样您就可以重写任何需要更改的内容! :)
  • 我目前正在使用另一页上的有机标签插件,我喜欢它。它具有我需要的所有功能。我只是不知道如何重写它以与其他页面一起使用,其中导航位于单独的 div 中。
  • 查看插件,很有可能您只需将 css 从选项卡切换到 sidenav-items 即可。

标签: html css ajax jquery


【解决方案1】:

保留 UI 部分,jquery 实现可能看起来像

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

链接到JSFiddle example

【讨论】:

  • 感谢这个有用的答案。效果很好,但没有完成我需要的。具体来说,让代码为您可以直接链接到的每个选项卡创建一个 url。我还需要 jQuery 在单击链接时向链接添加一个类,以便清楚您在哪个选项卡上。
  • 不是真的.. 这只是可以做的一个示例。检查 jsfiddle 以了解如何以更通用的方式完成它jsfiddle.net/G5qGs/2
  • 添加类,$('.link').removeClass('active_link'); $(this).addClass('active_link');在点击功能中
  • 这看起来很有希望。唯一的问题是它没有为每个 div 传递一个唯一的 url。
  • 这个代码可以与有机标签代码集成吗?它已经具有 url 功能(jsfiddle.net/taylortsantles/pC2SF)。
猜你喜欢
  • 1970-01-01
  • 2016-01-06
  • 2016-10-28
  • 2021-08-15
  • 2021-02-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多