jjzjj

javascript - JQuery 滚动/分页选项卡

coder 2024-05-10 原文

我正在尝试为一个网站创建一个简单的标签栏，它能够滚动页面上不适合的标签。这非常简单，不需要任何 ajax 或动态加载的内容...它只是显示所有选项卡，当您单击一个选项卡时，它会将您带到另一个页面。

我已经搜索了互联网，除了以下内容之外似乎找不到任何其他内容: http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html 然而，这是非常繁重和复杂的......我正在寻找一个 jquery 中的轻量级示例。如果有人可以提供帮助，我将不胜感激!

最佳答案

我最后自己写了一个 div，它的溢出被设置为隐藏。然后使用下面的 jquery 移动 div 中的选项卡。

    $(document).ready(function()
    {
      $('.scrollButtons .left').click(function()
      {
        var content = $(".tabs .scrollable .content")
        var pos = content.position().left + 250;
        if (pos >= 0)
        {
            pos = 0;
        }
        content.animate({ left: pos }, 1000);
      });
      $('.scrollButtons .right').click(function()
      {
        var content = $(".tabs .scrollable .content")
        var width = content.children('ul').width();
        var pos = content.position().left - 250;
        //var width = content.width();
        if (pos <= (width * -1) + 670)
        {
            pos = (width * -1) + 600;
        }
        content.animate({ left: pos }, 1000);
      });
    });

我的 HTML 看起来像这样:

    <div class="tabs">
    <div class="scrollable">
        <div class="content">
            <ul>
                <li>Tab1</li>
                <li>Tab2</li>
                <li>Tab3</li>
                <li>Tab4</li>
                <li>Tab5</li>                    
                </ul>
        </div>
    </div>
    <div class="scrollButtons">
        <ul>
            <li>
                <div class="left">
                </div>
            </li>
            <li>
                <div class="right">
                </div>
            </li>
        </ul>
    </div>
</div>

关于javascript - JQuery 滚动/分页选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1473644/

javascriptJQuerygtltcontentcssnavigationscroll

有关javascript - JQuery 滚动/分页选项卡的更多相关文章

  1. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  2. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  3. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  4. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言，一个比另一个好吗？还有更好的方法吗？ 最佳答案 总结:Array#include?包含String元素，在接受和拒绝输入时均胜出，对于您的示例只有三个可接受的值。对于要检查的更大的集合，看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

  7. ruby - 每个页面上的 Jekyll 分页 - 2

    据我们所知，Jekyll默认分页仅支持index.html，我想创建blog.html并在那里包含分页。有什么解决办法吗？ 最佳答案 如果您创建一个名为/blog的目录并在其中放置一个index.html文件，那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板，而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b

  8. ruby - 选项卡的 Rubocop - 2

    我们想使用Rubocop来验证我们的ruby​​在语法上是否正确并遵循基本代码指南。除此之外我们有这个规则:我们使用制表符缩进以允许任何人决定他们希望如何呈现它们(将它们显示为2或4个空格)问题是rubocop似乎设计为完全拒绝缩进标签。我们怎样才能超越所有这些规则成为太空合规者？编辑:我正在考虑覆盖这个模块https://github.com/bbatsov/rubocop/blob/master/lib/rubocop/source_parser.rb将我文件中的所有制表符替换为2个空格，以创建gem的幻觉... 最佳答案 添加

  9. ruby - Ruby 中的选项菜单 - 2

    我正在尝试在Ruby中创建一个菜单，以便根据用户输入的内容，取决于调用的类。然后在这种情况下它将返回到“Main”或类“Options”。我希望有人能帮助我。这是我的代码。modulePhysicsG=21C=20000Pi=3.14D=100endclassOptionsputs"Pleaseselect1forAccelerationand2forEnergy."option=gets()ifoption==1thenputs"AccelCalc"#ThisisthebitthatneedstodirecttheusertotheclassAccelCalcelseputs"Ene

  10. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

随机推荐