Question

很抱歉，如果之前以某种方式覆盖了我无法理解的内容。

我对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上也是一件好事，所以我可以用不同的方式设置它并给它一个文本光标。

我能用几行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，现在是时候学习这个了。一开始它是令人生畏的，但我想我正在慢慢开始掌握这个概念。

再次感谢。

Answer 1

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

然后，您可以在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();
            })
        )
});

如果你想拥有两个以上的页面，你应该循环播放。

我是否真的需要JQuery UI选项卡在两个Ajax加载之间来回切换？

1 个答案: