반응형
페이지를 다시 로드한 후 트위터 부트스트랩으로 현재 탭을 활성화하려면 어떻게 해야 합니까?
저는 현재 트위터 부트스트랩으로 탭을 사용하고 있으며 사용자가 데이터를 게시하고 페이지를 다시 로드한 후 동일한 탭을 선택하고 싶습니다.
어떻게 하는 겁니까?
탭을 시작하는 현재 통화 내용은 다음과 같습니다.
<script type="text/javascript">
$(document).ready(function() {
$('#profileTabs a:first').tab('show');
});
</script>
내 탭:
<ul id="profileTabs" class="nav nav-tabs">
<li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#about" data-toggle="tab">About Me</a></li>
<li><a href="#match" data-toggle="tab">My Match</a></li>
</ul>
이를 관리하려면 로컬 스토리지 또는 쿠키를 사용해야 합니다.대폭 개선할 수 있지만 출발점을 제공할 수 있는 신속하고 더러운 솔루션이 있습니다.
$(function() {
// for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// save the latest tab; use cookies if you like 'em better:
localStorage.setItem('lastTab', $(this).attr('href'));
});
// go to the latest tab, if it exists:
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('[href="' + lastTab + '"]').tab('show');
}
});
쿠키를 사용하고 다른 탭 및 탭 창에서 'active' 클래스를 제거하여 이 작업을 수행할 수 있도록...현재 탭 및 탭 창에 'active' 클래스를 추가합니다.
더 좋은 방법이 있을 거라고 확신하지만, 이 경우에는 효과가 있는 것 같습니다.
jQuery cookie 플러그인이 필요합니다.
$(function() {
$('a[data-toggle="tab"]').on('shown', function(e){
//save the latest tab using a cookie:
$.cookie('last_tab', $(e.target).attr('href'));
});
//activate latest tab, if it exists:
var lastTab = $.cookie('last_tab');
if (lastTab) {
$('ul.nav-tabs').children().removeClass('active');
$('a[href='+ lastTab +']').parents('li:first').addClass('active');
$('div.tab-content').children().removeClass('active');
$(lastTab).addClass('active');
}
});
다른 대답은 모두 맞습니다.이 대답은 한 사람이 여러 개를 가질 수 있다는 사실을 고려할 것입니다.ul.nav.nav-pills아니면ul.nav.nav-tabs같은 쪽에이 경우 이전의 답변은 실패합니다.
아직 사용중localStorage그러나 끈으로 묶은 채로JSON가치로서코드는 다음과 같습니다.
$(function() {
var json, tabsState;
$('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown', function(e) {
var href, json, parentId, tabsState;
tabsState = localStorage.getItem("tabs-state");
json = JSON.parse(tabsState || "{}");
parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
href = $(e.target).attr('href');
json[parentId] = href;
return localStorage.setItem("tabs-state", JSON.stringify(json));
});
tabsState = localStorage.getItem("tabs-state");
json = JSON.parse(tabsState || "{}");
$.each(json, function(containerId, href) {
return $("#" + containerId + " a[href=" + href + "]").tab('show');
});
$("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
var $this = $(this);
if (!json[$this.attr("id")]) {
return $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first").tab("show");
}
});
});
이 비트는 모든 페이지에 걸쳐 앱 전체에서 사용할 수 있으며 탭과 알약 모두에 사용할 수 있습니다.또한 탭이나 약이 기본적으로 활성화되어 있지 않은지 확인합니다. 그렇지 않으면 페이지 로드 시 깜박임 효과가 나타납니다.
중요: 부모를 확인합니다.ul아이디가 있습니다.고마워 알랭
최적의 옵션을 사용하려면 다음과 같은 방법을 사용합니다.
$(function() {
//for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
$('a[data-toggle="tab"]').on('click', function (e) {
//save the latest tab; use cookies if you like 'em better:
localStorage.setItem('lastTab', $(e.target).attr('href'));
});
//go to the latest tab, if it exists:
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('a[href="'+lastTab+'"]').click();
}
});
저는 선택한 탭을 윈도우의 해시값에 저장하는 것을 선호합니다.이를 통해 "동일한" 페이지를 보는 동료에게 링크를 보낼 수도 있습니다.다른 탭을 선택하면 위치의 해시를 변경할 수 있습니다.페이지에서 이미 #를 사용하는 경우 해시 태그를 분할해야 할 수도 있습니다.제 앱에서는 해시값 구분자로 ":"를 사용합니다.
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">home</div>
<div class="tab-pane" id="profile">profile</div>
<div class="tab-pane" id="messages">messages</div>
<div class="tab-pane" id="settings">settings</div>
</div>
<script>
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
});
// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');
</script>
첫 번째 탭에서 페이지가 깜박이는 것을 방지하고 쿠키에 의해 저장된 탭을 막으려면(첫 번째 탭에서 기본적으로 "활성" 클래스를 결정할 때 발생합니다)
다음과 같이 탭과 창의 클래스 "active"를 제거합니다.
<ul class="nav nav-tabs">
<div id="p1" class="tab-pane">
첫번째 탭을 기본값처럼 설정하려면 아래 스크립트를 놓습니다(jQuery cookie plugin 필요).
$(function() {
$('a[data-toggle="tab"]').on('shown', function(e){
//save the latest tab using a cookie:
$.cookie('last_tab', $(e.target).attr('href'));
});
//activate latest tab, if it exists:
var lastTab = $.cookie('last_tab');
if (lastTab) {
$('a[href=' + lastTab + ']').tab('show');
}
else
{
// Set the first tab if cookie do not exist
$('a[data-toggle="tab"]:first').tab('show');
}
});
여러 페이지에 탭이 있고 localStorage가 이전 페이지의 lastTab을 유지하기 때문에 다음 페이지의 경우 이전 페이지의 lastTab이 저장되어 있으므로 일치하는 탭을 찾을 수 없어 아무것도 표시되지 않았습니다.이렇게 수정했습니다.
$(document).ready(function(){
//console.log($('a[data-toggle="tab"]:first').tab('show'))
$('a[data-toggle="tab"]').on('shown.bs.tab', function () {
//save the latest tab; use cookies if you like 'em better:
localStorage.setItem('lastTab', $(this).attr('href'));
});
//go to the latest tab, if it exists:
var lastTab = localStorage.getItem('lastTab');
if ($('a[href=' + lastTab + ']').length > 0) {
$('a[href=' + lastTab + ']').tab('show');
}
else
{
// Set the first tab if cookie do not exist
$('a[data-toggle="tab"]:first').tab('show');
}
})
edit: 나는 내가 다른 것을 가져야 한다는 것을 알아차렸습니다.lastTab다른 을 사용합니다. 그렇지 서로 입니다). 그렇지 않으면 항상 서로 덮어씁니다. 예를 들어.lastTab_klanten,lastTab_bestellingen 두 등에 klanten그리고.bestellingen둘 다 탭에 데이터가 표시되어 있습니다.
$(document).ready(function(){
//console.log($('a[data-toggle="tab"]:first').tab('show'))
$('a[data-toggle="tab"]').on('shown.bs.tab', function () {
//save the latest tab; use cookies if you like 'em better:
localStorage.setItem('lastTab_klanten', $(this).attr('href'));
});
//go to the latest tab, if it exists:
var lastTab_klanten = localStorage.getItem('lastTab_klanten');
if (lastTab_klanten) {
$('a[href=' + lastTab_klanten + ']').tab('show');
}
else
{
// Set the first tab if cookie do not exist
$('a[data-toggle="tab"]:first').tab('show');
}
})
퇴색 효과를 원하십니까?@Oktav 코드 업데이트 버전:
- 부트스트랩 3의 경우
- 바꿈이 제대로 작동할 수 있도록 li 및 탭의 div에서 클래스를 설정합니다.모든 컨텐츠 디바이브는 다음과 같은 작업을 수행해야 합니다.
class="tab-pane fade"
코드:
// See http://stackoverflow.com/a/16984739/64904
// Updated by Larry to setup for fading
$(function() {
var json, tabsState;
$('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
var href, json, parentId, tabsState;
tabsState = localStorage.getItem("tabs-state");
json = JSON.parse(tabsState || "{}");
parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
href = $(e.target).attr('href');
json[parentId] = href;
return localStorage.setItem("tabs-state", JSON.stringify(json));
});
tabsState = localStorage.getItem("tabs-state");
json = JSON.parse(tabsState || "{}");
$.each(json, function(containerId, href) {
var a_el = $("#" + containerId + " a[href=" + href + "]");
$(a_el).parent().addClass("active");
$(href).addClass("active in");
return $(a_el).tab('show');
});
$("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
var $this = $(this);
if (!json[$this.attr("id")]) {
var a_el = $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first"),
href = $(a_el).attr('href');
$(a_el).parent().addClass("active");
$(href).addClass("active in");
return $(a_el).tab("show");
}
});
});
이 @dgabriel .<a>id합니다에 합니다.
$(function() {
$('a[data-toggle="tab"]').on('shown', function (e) {
var indexTab = $('a[data-toggle="tab"]').index($(this)); // this: current tab anchor
localStorage.setItem('lastVisitedTabIndex', indexTab);
});
//go to the latest tab, if it exists:
var lastIndexTab = localStorage.getItem('lastVisitedTabIndex');
if (lastIndexTab) {
$('a[data-toggle="tab"]:eq(' + lastIndexTab + ')').tab('show');
}
});
다음과 같은 변경을 제안합니다.
폴백이 내장된 크로스 브라우저/크로스 플랫폼 로컬 스토리지 API를 제공하는 amplify.store와 같은 플러그인을 사용합니다.
처럼 으로 합니다.
$('#div a[data-toggle="tab"]')이 기능을 동일한 페이지에 존재하는 여러 탭 컨테이너로 확장할 수 있습니다.:
(url ??)여러 페이지에 걸쳐 마지막으로 사용한 탭을 저장하고 복원합니다.
$(function() {
$('#div a[data-toggle="tab"]').on('shown', function (e) {
amplify.store(window.location.hostname+'last_used_tab', $(this).attr('href'));
});
var lastTab = amplify.store(window.location.hostname+'last_used_tab');
if (lastTab) {
$("#div a[href="+ lastTab +"]").tab('show');
}
});
로컬 스토리지가 없는 간편한 솔루션:
$(".nav-tabs a").on("click", function() {
location.hash = $(this).attr("href");
});
서버측 접근 방식.지정하지 않으면 null을 처리해야 할 경우 모든 html 요소에 class=""가 있는지 확인하십시오.
private void ActiveTab(HtmlGenericControl activeContent, HtmlGenericControl activeTabStrip)
{
if (activeContent != null && activeTabStrip != null)
{
// Remove active from content
Content1.Attributes["class"] = Content1.Attributes["class"].Replace("active", "");
Content2.Attributes["class"] = Content2.Attributes["class"].Replace("active", "");
Content3.Attributes["class"] = Content3.Attributes["class"].Replace("active", "");
// Remove active from tab strip
tabStrip1.Attributes["class"] = tabStrip1.Attributes["class"].Replace("active", "");
tabStrip2.Attributes["class"] = tabStrip2.Attributes["class"].Replace("active", "");
tabStrip3.Attributes["class"] = tabStrip3.Attributes["class"].Replace("active", "");
// Set only active
activeContent.Attributes["class"] = activeContent.Attributes["class"] + " active";
activeTabStrip.Attributes["class"] = activeTabStrip.Attributes["class"] + " active";
}
}
페이지에 처음 들어갈 때 첫 번째 탭을 표시하려면 다음 코드를 사용합니다.
<script type="text/javascript">
function invokeMeMaster() {
var chkPostBack = '<%= Page.IsPostBack ? "true" : "false" %>';
if (chkPostBack == 'false') {
$(function () {
// for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// save the latest tab; use cookies if you like 'em better:
localStorage.setItem('lastTab', $(this).attr('href'));
});
});
}
else {
$(function () {
// for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// save the latest tab; use cookies if you like 'em better:
localStorage.setItem('lastTab', $(this).attr('href'));
});
// go to the latest tab, if it exists:
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('[href="' + lastTab + '"]').tab('show');
}
});
}
}
window.onload = function() { invokeMeMaster(); };
</script>여기에 부트스트랩 3과 jQuery로 작동하며 다른 탭을 포함하는 다른 URL로 작동하는 제가 만든 스니펫이 있습니다.페이지당 여러 개의 탭을 지원하지는 않지만 해당 기능이 필요한 경우 쉽게 수정할 수 있습니다.
/**
* Handles 'Bootstrap' package.
*
* @namespace bootstrap_
*/
/**
* @var {String}
*/
var bootstrap_uri_to_tab_key = 'bootstrap_uri_to_tab';
/**
* @return {String}
*/
function bootstrap_get_uri()
{
return window.location.href;
}
/**
* @return {Object}
*/
function bootstrap_load_tab_data()
{
var uriToTab = localStorage.getItem(bootstrap_uri_to_tab_key);
if (uriToTab) {
try {
uriToTab = JSON.parse(uriToTab);
if (typeof uriToTab != 'object') {
uriToTab = {};
}
} catch (err) {
uriToTab = {};
}
} else {
uriToTab = {};
}
return uriToTab;
}
/**
* @param {Object} data
*/
function bootstrap_save_tab_data(data)
{
localStorage.setItem(bootstrap_uri_to_tab_key, JSON.stringify(data));
}
/**
* @param {String} href
*/
function bootstrap_save_tab(href)
{
var uri = bootstrap_get_uri();
var uriToTab = bootstrap_load_tab_data();
uriToTab[uri] = href;
bootstrap_save_tab_data(uriToTab);
}
/**
*
*/
function bootstrap_restore_tab()
{
var uri = bootstrap_get_uri();
var uriToTab = bootstrap_load_tab_data();
if (uriToTab.hasOwnProperty(uri) &&
$('[href="' + uriToTab[uri] + '"]').length) {
} else {
uriToTab[uri] = $('a[data-toggle="tab"]:first').attr('href');
}
if (uriToTab[uri]) {
$('[href="' + uriToTab[uri] + '"]').tab('show');
}
}
$(document).ready(function() {
if ($('.nav-tabs').length) {
// for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
bootstrap_save_tab($(this).attr('href'));
});
bootstrap_restore_tab();
}
});
$(document).ready(기능) {
if (JSON.parse(localStorage.getItem('currentClass')) == "active")
{
jQuery('#supporttbl').addClass('active')
$('.sub-menu').css({ "display": "block" });
}
$("#supporttbl").click(function () {
var currentClass;
if ($(this).attr('class')== "active") {
currentClass = $(this).attr('class');
localStorage.setItem('currentClass', JSON.stringify(currentClass));
console.log(JSON.parse(localStorage.getItem('currentClass')));
jQuery('#supporttbl').addClass('active')
$('.sub-menu').css({ "display": "block" });
} else {
currentClass = "Null";
localStorage.setItem('currentClass', JSON.stringify(currentClass));
console.log(JSON.parse(localStorage.getItem('currentClass')));
jQuery('#supporttbl').removeClass('active')
$('.sub-menu').css({ "display": "none" });
}
});
});
페이지에 두개 이상의 탭이 있다면 다음 코드를 사용할 수 있습니다.
<script type="text/javascript">
$(document).ready(function(){
$('#profileTabs').on('show.bs.tab', function(e) {
localStorage.setItem('profileactiveTab', $(e.target).attr('href'));
});
var profileactiveTab = localStorage.getItem('profileactiveTab');
if(profileactiveTab){
$('#profileTabs a[href="' + profileactiveTab + '"]').tab('show');
}
$('#charts-tab').on('show.bs.tab', function(e) {
localStorage.setItem('chartsactiveTab', $(e.target).attr('href'));
});
var chartsactiveTab = localStorage.getItem('chartsactiveTab');
if(chartsactiveTab){
$('#charts-tab a[href="' + chartsactiveTab + '"]').tab('show');
}
});
</script>
이렇게 하면 탭이 새로 고쳐지지만 컨트롤러의 모든 것이 로드된 후에만 새로 고쳐집니다.
// >= angular 1.6 angular.element(function () {
angular.element(document).ready(function () {
//Here your view content is fully loaded !!
$('li[href="' + location.hash + '"] a').tab('show');
});
MVC와 함께 사용하고 있습니다.
- 모델에 값을 POST 메서드로 보낼 SelectedTab 정수 필드가 있습니다.
자바스크립트 섹션:
<script type="text/javascript">
$(document).ready(function () {
var index = $("input#SelectedTab").val();
$("#tabstrip > ul li:eq(" + index + ")").addClass("k-state-active");
$("#tabstrip").kendoTabStrip();
});
function setTab(index) {
$("input#SelectedTab").val(index)
}
</script>
HTML 섹션:
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.HiddenFor(model => model.SelectedTab)
<div id="tabstrip">
<ul>
<li onclick="setTab(0)">Content 0</li>
<li onclick="setTab(1)">Content 1</li>
<li onclick="setTab(2)">Content 2</li>
<li onclick="setTab(3)">Content 3</li>
<li onclick="setTab(4)">Content 4</li>
</ul>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<div class="content">
<button type="submit" name="save" class="btn bg-blue">Save</button>
</div>
}
언급URL : https://stackoverflow.com/questions/10523433/how-do-i-keep-the-current-tab-active-with-twitter-bootstrap-after-a-page-reload
반응형
'bestsource' 카테고리의 다른 글
| AngularJS 재스민 테스트 실패: 모듈을 인스턴스화하지 못했습니다. (0) | 2023.10.16 |
|---|---|
| XML 스키마(XSD) 검증 도구? (0) | 2023.10.16 |
| C++ 방식으로 앨리어싱 구조 및 배열 (0) | 2023.10.16 |
| 사용자 지정 워드프레스 편집기? (0) | 2023.10.16 |
| Angular-ui.router:보기 새로 고침 없이 URL 업데이트 (0) | 2023.10.16 |