Я пытаюсь использовать jquery для создания эффекта табуляции для нескольких элементов div. на данный момент есть список элементов, который при нажатии вызывает div с совпадающим идентификатором в качестве гиперссылки. Но я хочу иметь возможность иметь дополнительную функцию, в рамках которой внутри содержимого DIV есть ссылка, по которой вы щелкаете, и она будет показывать следующий div после него, а также выделять текущий div, на котором он включен.
У меня почти все работает, за исключением подсветки навигационной панели, соответствующей текущему DIV, который вы просматриваете, который запускается по внутренней ссылке внутри содержимого DIV.
Надеюсь, это не слишком смущает понимание, ниже приведен код того, что я получил до сих пор.
HTML:
<div>
<div id="page1">
<p>xxx</p>
<p><a href="#page2">Continue »</a></p>
</div>
<div id="page2">
<p>xxx</p>
</div>
</div><!-- /tabContainer -->
<div>
<span>Page</span>
<ul>
<li><a href="#page1">1</a></li>
<li><a href="#page2">2</a></li>
</ul>
</div><!-- /pagination -->
JavaScript:
$(".tabContent").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tabContent:first").show();
$("ul.tabs li").click(function(e) {
e.preventDefault();
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tabContent").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
$(".continue").click(function(e) {
e.preventDefault();
var activePage = $(this).attr("href");
$(this).parent().parent().hide();
$(activePage).fadeIn();
$("ul.tabs li").removeClass("active");
$("ul.tabs li > a[href='activePage']").addClass("active");
});