0

抱歉，如果以前以某种我无法理解的方式对此进行了介绍。

我对 JavaScript/Jquery 有点陌生，我通常喜欢浪费时间，努力解决问题，直到我弄明白为止，但我缺乏知识可能导致我把事情复杂化，而我可能不知道有一个更简单的解决方案。

我已经成功地为在两种类型的设计之间切换的投资组合页面实现了 JQuery UI 选项卡。然后，我可以使用我喜欢的 AJAX 加载每个内容，但不确定在我的情况下它除了分离内容之外还有什么好处。

然后我想切换到使用文本链接而不是 ul.tabs。我一直只是从选项卡中剥离样式以使它们显示为基本文本链接，但我认为有一种更直接的方法可以做到这一点，并希望将链接从选项卡区域移到侧边栏。但是，我不知道如何使文本链接加载 AJAX。

在试图弄清楚之后，我想知道 UI 选项卡是否是我需要的东西。我只是将它们用作在两组内容之间来回淡入和淡出的一种方式。

我在猜测是否有一种更简单的方法可以做到这一点？

两个文本链接，两个要使用 Ajax 加载的 html 文件，在更改之间淡入淡出。这就是我想要的。

这就是我想要的html-

<div id="sidebar">
  <ul>
    <li><a href="ajax/designs1">Designs 1</a></li>
    <li><a href="ajax/designs2">Designs 2</a></li>
  </ul>
</div>
<div id="content">
  This is where stuff will load
</div>

我想将一个类附加到活动的 li a 上也会很好，这样我就可以对它进行不同的样式设置并给它一个文本光标。

我可以用几行 JavaScript/JQuery 来做到这一点吗？

另外，如果禁用 JavaScript，是否有一种 noscript 方法可以同时加载两个 html 文件？

对不起，无知。我会很高兴并感谢一些帮助。

更新：

我不介意这些标签，它们很棒而且非常易于使用。我已经让他们控制我的投资组合有一段时间了。我只知道我几乎没有使用该功能，而且不值得。

这个网站已经关闭了一段时间，所以我一直在试图找出你给我自己的代码。我无法让它像你一样工作。附加功能让我感到困惑，我不知道点击之前附加了什么。但是我能够通过尝试和错误的方式让它工作，几乎完美地达到了我想要的效果，但是隐藏部分的淡入和淡出都搞砸了。可见部分是完美的。

这就是我想出的。就像我说的，我在学习过程中很深入，所以如果这段代码出于某种原因是错误的，请原谅。

$(document).ready(function(){
        $('#websites').hide();
        $('#hitlogo').addClass("activ");    

        $('#hitlogo').click(function() {
        $(this).addClass("activ");  
        $('#hitweb').removeClass("activ");
        $('#websites').fadeOut(1000);
        $('#logos').fadeIn(1000);
    })

     $('#hitweb').click(function() {
         $(this).addClass("activ"); 
         $('#hitlogo').removeClass("activ");
         $('#logos').fadeOut(1000);
         $('#websites').fadeIn(1000);
    })

});

我放弃了尝试解决淡入淡出的问题并转向其他事情。虽然当我能够在每个类被单击时添加和删除类时我为自己感到非常自豪，这样我就可以根据需要设置它们的样式。

我很快就使用了你给我的代码来加载页面，它似乎正在工作，我只需要添加一些淡入淡出。

是否应该以任何特定方式编写加载的 html 页面？现在它只是原始页面内的一组元素，没有别的。单独查看，没有 CSS 样式或任何其他元素。我是否遗漏了什么，或者这就是那些禁用 JS 的人的情况？

我感谢您的帮助。学习很有趣。不久前我掌握了 html 和 css，现在是时候开始学习了。起初它令人生畏，但我想我正在慢慢开始掌握这个概念。

再次感谢。

4

2 回答 2

0

完成这一切的最简单方法是将所有内容静态地放在同一页面上。

然后，您可以在 Javascript 中添加所有交互，使其与 Noscript 无缝协作。

你可以这样写：

$(function() {
    $('#page2').hide();
    $('#linkContainer')
        .appendChild(
            $('<a href="#">Page 1</a>').click(function() {
                $('#page2').fadeOut();
                $('#page1').fadeIn();
            })
        ).appendChild(
            $('<a href="#">Page 2</a>').click(function() {
                $('#page1').fadeOut();
                $('#page2').fadeIn();
            })
        )
});

如果你想拥有两个以上的页面，你应该循环执行此操作。

于 2009-10-16T01:01:36.970 回答
0

jQuery UI 选项卡没有任何问题……插件应该让你的生活更轻松。

无论如何，请查看nettuts+上关于 Ajax 选项卡的本教程。我想你可能会喜欢它并从中学习:)

编辑：嗯......好吧，我想我没有回答你的问题。要获得加载 AjAX 的链接，您只需将点击事件绑定到它。

<script type="text/javascript">
$(document).ready(function(){
 $('#sidebar a').click(function(){
  var url = $(this).attr('href');
  $('#content').load(url,loaded);
  return false;
 })
});
function loaded() {
 $('#content').show();
}
</script>

如果 javascript 被禁用，这样做还可以让您的网站正常工作，因为链接会将您带到适当的页面。如果没有 javascript，您将无法在不使用框架的情况下同时显示两个页面。

于 2009-10-16T05:05:42.830 回答