如果您看到这个 Fiddle 演示,http://jsfiddle.net/Zj2Vq/1/它正在工作,但我真正想要的是它滚动到与我离开时完全相同的位置(在选项卡“one”中)最后一次(所以黄色/点击的线不一定是第一行)。相反,它正在滚动到单击的行,但在显示活动/单击的行之前我想要更多的上下文。
HTML:
<div id="tabsMain">
<!-- The menu line of the three tabs -->
<ul>
<li id="tab_one">
<a href="#one">one</a>
</li>
<li>
<a href="#two">two</a>
</li>
<li>
<a href="#three">three</a>
</li>
</ul>
<!-- Tab "one" -->
<div id='one'>
<table>
<tr><td><div data-id='1000' class='edit'>Line 1</div></td></tr>
<tr><td><div data-id='1001' class='edit'>Line 2</div></td></tr>
<tr><td><div data-id='1002' class='edit'>Line 3</div></td></tr>
<tr><td><div data-id='1003' class='edit'>Line 4</div></td></tr>
<tr><td><div data-id='1004' class='edit'>Line 5</div></td></tr>
<tr><td><div data-id='1005' class='edit'>Line 6</div></td></tr>
<tr><td><div data-id='1006' class='edit'>Line 7</div></td></tr>
<tr><td><div data-id='1007' class='edit'>Line 8</div></td></tr>
<tr><td><div data-id='1008' class='edit'>Line 9</div></td></tr>
<tr><td><div data-id='1009' class='edit'>Line 10</div></td></tr>
<tr><td><div data-id='1120' class='edit'>Line 11</div></td></tr>
<tr><td><div data-id='1121' class='edit'>Line 12</div></td></tr>
<tr><td><div data-id='1122' class='edit'>Line 13</div></td></tr>
<tr><td><div data-id='1123' class='edit'>Line 14</div></td></tr>
<tr><td><div data-id='2001' class='edit'>Line 15</div></td></tr>
<tr><td><div data-id='2003' class='edit'>Line 16</div></td></tr>
<tr><td><div data-id='3000' class='edit'>Line 17</div></td></tr>
<tr><td><div data-id='3001' class='edit'>Line 18</div></td></tr>
<tr><td><div data-id='3002' class='edit'>Line 19</div></td></tr>
<tr><td><div data-id='3003' class='edit'>Line 20</div></td></tr>
<tr><td><div data-id='3004' class='edit'>Line 21</div></td></tr>
<tr><td><div data-id='3005' class='edit'>Line 22</div></td></tr>
<tr><td><div data-id='3006' class='edit'>Line 23</div></td></tr>
<tr><td><div data-id='3007' class='edit'>Line 24</div></td></tr>
<tr><td><div data-id='3008' class='edit'>Line 25</div></td></tr>
<tr><td><div data-id='3009' class='edit'>Line 26</div></td></tr>
<tr><td><div data-id='4120' class='edit'>Line 27</div></td></tr>
<tr><td><div data-id='4121' class='edit'>Line 28</div></td></tr>
<tr><td><div data-id='4122' class='edit'>Line 29</div></td></tr>
<tr><td><div data-id='4123' class='edit'>Line 30</div></td></tr>
<tr><td><div data-id='5001' class='edit'>Line 31</div></td></tr>
<tr><td><div data-id='5003' class='edit'>Line 32</div></td></tr>
</table>
</div>
<!-- Two -->
<div id='two'>
Tab two will do some stuff ...
</div>
<!-- Three -->
<div id='three'>
Tab three will do some other stuff ...
</div>
</div>
jQuery:
$(function () {
$("#tabsMain").tabs({
// Populate a variable with the current/active tab
activate: function (event, ui) {
oldTabIndex = ui.oldTab.index();
}
});
});
// --------------------------------------------------------------------
// Return to same vertical position when clicking the view tab
// but only if we come from the 2nd tab
$("#tab_one").click(function (event) {
if (oldTabIndex == 1) {
if ($("#selectedRow").length > 0) {
$('html, body').animate({
scrollTop: $("#selectedRow").offset().top
}, 500);
}
}
});
// --------------------------------------------------------------------
// Highlight current row and set selection color and ID attribute
var bgcolor;
var yellow = "rgb(255, 255, 0)";
$("table tr").hover(
function () { // hover-in
bgcolor = $(this).css("background-color");
if (bgcolor != yellow) {
$(this).css("background-color", "khaki");
}
},
function () { // hover-out
bgcolor = $(this).css("background-color");
if (bgcolor === yellow) {
$(this).css("background-color", "yellow");
} else {
$(this).css("background-color", "");
}
});
$("table tr").click(function () {
$("table tr").each(function () {
$(this).css("background-color", "");
$(this).removeAttr('id');
});
$(this).css("background-color", "yellow");
$(this).attr('id', 'selectedRow');
});
// --------------------------------------------------------------------
// Clicks on the "edit" class
$(".edit").click(function (e) {
e.preventDefault(); // prevent the window/page to jump to the top
// Change focus to tab "two" (0-based index so this is the 2nd tab)
$("#tabsMain").tabs("option", "active", 1);
// Get the ID we need to edit
var id = $(this).closest('div').data('id');
// some Ajax stuff ...
});
这有可能吗?