标签: jquery-tabs

我正在使用jquery 1.9和jquery UI 1.10

我希望能够在单击选项卡时获取选项卡ID.例如,如果我单击名为"Second"的选项卡,我想获得"tabs-2"响应.

到目前为止我已完成以下代码:

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs({
            beforeActivate: function (event, ui) {
                alert(/* the id of the tab (div) being activated */);
            }
        });
    });
</script>

<div id="tabs">
    <ul>
       <li><a href="#tabs-1">First</a></li>
       <li><a href="#tabs-2">Second</a></li>
    </ul>
    <div id="tabs-1">
        <p>abcde</p>
    </div>
    <div id="tabs-2">
        <p>fghi</p>
    </div>
</div> 

如何创建一个滚动到下一个jQuery选项卡的按钮.我想在选项卡中有一个下一个按钮,它将滚动到下一个选项卡,有点像一步一步的教程.

如何才能做到这一点？到目前为止,我的代码如下.

HTML

<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p> <a href="nexttab">Next Tab</a>
    </div>
    <div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</div>
    <div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</div>
</div>

JS

$(document).ready(function () {
    $("#tabs").tabs();
});

jQuery Tabs存在很大问题.

我试图加载我的网站产品页面上的选项卡...当页面加载时,我看到标签内容一秒钟(标准html选项卡不是ajax)然后突然我的整个网站加载在选项卡内.

我正在使用jquery ui tabs演示页面中的标准代码.

<div id="productTabs">
    <ul>
        <li><a href="#tabDescription">Description</a></li>
        <li><a href="#tabSpecs">Specifications</a></li>
        <li><a href="#tabReviews">Reviews</a></li>
        <li><a href="#tabDownloads">Downloads</a></li>
    </ul>
    <div id="tabDescription">test</div>
    <div id="tabSpecs">test</div>
    <div id="tabReviews">test</div>
    <div id="tabDownloads">Sorry, no downloads available for this product.</div>
</div>
<script type="text/javascript">jQuery(document).ready(function(){jQuery("#productTabs").tabs();});</script>

但是,我在网站周围有很多其他的javascript,只是想知道是否有人之前见过这个.

非常感谢

我知道我可以获取当前所选选项卡的索引,但是我可以以某种方式获取当前所选选项卡的ID(相当于ui.panel.id如果这是由选项卡事件触发...但它不是)？我不想使用索引,因为选项卡的顺序可能会改变.我不喜欢使用样式标记,因为在将来的版本中可能会更改.有这个方法吗？如果没有,我可以以某种方式使用索引来访问它(甚至可能首先访问面板对象)？还有其他想法吗？

我需要在单击html按钮时为jquery选项卡选择特定的选项卡功能.我正在使用jquery.1.9.1.js和jquery-ui-1.10.2.custom.js提交.我已经实现了以下代码,但对我不起作用.

<script language="javascript" type="text/javascript">
 $("#ui-tabs").tabs();
 function SelectTab() { // bind click event to link
                 $('#ui-tabs').tabs('select', 2); // switch to third tab
                 return false;
             }
 </script>
<div id="ui-tabs">
<ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">Tab1 content </div>
<div id="tabs-2">Tab2 content </div>
<div id="tabs-3">Tab3 content </div>
</div><a id="next" class="button-style" href="#" onclick="return SelectTab();">Select Tab</a>

问题是$('#ui-tabs').tabs('select', 2);函数中的语句SelectTab给了我错误Microsoft JScript runtime error: no such method 'select' for tabs widget …

在我的应用程序中,我到目前为止都避免需要加载任何jQuery样式表,但UI-tabs插件似乎需要一些CSS才能工作.好的,很好,但是这些示例可以加载所有UI样式,或许更重要的是,标签样式完全破坏了我自己的外观和感觉.

有没有地方可以学习如何为标签提供足够的CSS工作,所以我可以保留自己的样式？

我不介意最小量的造型有助于很好地安排标签或其他东西,但背景图片,颜色......他们与我自己的造型冲突非常糟糕.

哦,不用了主题滚筒,我相信这对某些人来说很好.只是不在这种情况下,谢谢.

我正在使用jQuery选项卡.其中一个选项卡是一个所见即所得的编辑器,需要在显示选项卡后刷新,但我无法确定是否有一个事件在加载选项卡后触发.

根据我的理解,load事件仅适用于使用ajax调用的选项卡.我已经尝试过使用它但它不会触发: jQuery ui tabs load/tabsload事件不会触发

在该示例中,他们使用iframe,其具有触发的加载事件.我只是使用没有加载事件的div,而不像onshow事件监听器.

我能够得到的最接近的是tabsselect事件,该事件在单击选项卡时触发,但在加载新选项卡之前触发.

当我不使用ajax时,是否有任何事件在加载选项卡后触发？

谢谢

我正在尝试使用具有面板内容的jQuery-UI的选项卡小部件来扩展到整个可用空间.

这是我到目前为止的简化版本:http: //jsfiddle.net/MhEEH/3/

当我使用以下CSS时,您会看到#tab-1的绿色面板内容只覆盖整个页面,而不仅仅是面板空间:

 #tab-1 {
    background: green;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

我可以使用"top:27px;" 解决这个问题,但这会碰到两件事:

1. 如果我更改选项卡"主题",高度(27px)可能会更改
2. 如果我有很多标签,我会在第一行下面有第二行.所以我的小组内容将涵盖第二行......

干净简洁的解决方案会很好.

JavaScript是可以接受的,而(干净!)仅CSS的解决方案更可取......

- 问候,

斯特凡

我正在使用带有Sortable的jQuery UI选项卡,如何在Double Click上重命名？请帮帮我!

小提琴

HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab Content 1</p>
  </div>
  <div id="tabs-2">
    <p>Tab Content 2</p>
  </div>
  <div id="tabs-3">
    <p>Tab Content 3</p>
  </div>
</div>

jQuery的

$(function() {
    var tabs = $( "#tabs" ).tabs();
    tabs.find( ".ui-tabs-nav" ).sortable({
        axis: "x",
        stop: function() {
            tabs.tabs( "refresh" );
        }
    });
});

我正在使用JQuery工具的标签功能,同时我使用JQuery UI.

如果我包含两个JS库,带有选项卡的Jquery工具不起作用.

如何解决这个冲突？任何帮助表示赞赏.

提前致谢.