0
私は動的ナビゲーションを作成しようとしています。画面サイズが電話機の場合、私はブートストラップリストグループを使用していますが、サイズを変更するときにナビピルを使用しています。私がしようとしているのは、現在の要素をアクティブなクラスでキャプチャして、ウィンドウのサイズを変更するときに変数currentTabに保存されたテキストがタグに含まれる 'アクティブ'クラスを追加するようにすることです。現在、私はchangeActive関数を入力していることを知っていますが、テキストを持っていますが、アクティブなクラスを追加することはできません。 Javascriptをjqueryを使用して要素を取得し、クラスを追加するには
$(document).ready(function() {
var listHTML = '<div class="list-group"><a href="#" class="list-group-item active">About</a><a href="#" class="list-group-item">Animals</a><a href="#" class="list-group-item">Adoptly</a><a href="#" class="list-group-item">Blog</a><a href="#" class="list-group-item">Events</a></div>'
var pillsHTML ='<ul class="nav nav-pills"><li role="presentation" class="active"><a href="#">About</a></li><li role="presentation"><a href="#">Animals</a></li><li role="presentation"><a href="#">Adoptly</a></li><li role="presentation"><a href="#">Blog</a></li><li role="presentation"><a href="#">Events</a></li></ul>'
function checkWidth() {
var windowsize = $(window).width();
var current = document.getElementsByClassName('active');
var displayText = current[0].textContent;
if (windowsize > 425) {
//if the window is greater than 440px wide then turn on jScrollPane..
$("#navigation").empty();
$("#navigation").html(pillsHTML);
checkActive(displayText);
}
else
{
$("#navigation").empty();
$("#navigation").html(listHTML);
checkActive(displayText);
}
}
function checkActive(currentTab){
console.log(currentTab);
$('a:contains(currentTab)').addClass('active');
}
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
$('#navigation').on('click','.list-group-item',function(e){
var previous = $(this).closest(".list-group").children(".active");
previous.removeClass('active'); // previous list-item
$(e.target).addClass('active'); // activated list-item
});
});
<div id='navigation'>
<div class="list-group">
<a href="#" class="list-group-item active">About</a>
<a href="#" class="list-group-item">Animals</a>
<a href="#" class="list-group-item">Adoptly</a>
<a href="#" class="list-group-item">Blog</a>
<a href="#" class="list-group-item">Events</a>
</div>
</div><!--End of navigation-->
は、私が使用するよりも、他のさまざまなソリューションを作成した人々は、私が上に移動誰かが実際にソリューションを持っている場合は使用してきたことを知っているので、私はそれをここに投稿するつもりだ含まれてい私は解決策としてピックアップすることを確認します。
function checkWidth() {
var windowsize = $(window).width();
var current = document.getElementsByClassName('active');
var displayText = current[0].textContent;
if (windowsize > 425) {
//if the window is greater than 440px wide then turn on jScrollPane..
$("#navigation").empty();
$("#navigation").html(pillsHTML);
checkActive(displayText,true);
}
else
{
$("#navigation").empty();
$("#navigation").html(listHTML);
checkActive(displayText,false);
}
}
function checkActive(currentTab, bool){
console.log(bool);
if(bool)
{
$('li').removeClass('active');
var element = document.getElementById(currentTab);
$(element).addClass('active');
}
else
{
$('.list-group-item').removeClass('active');
var element = document.getElementById(currentTab);
$(element).addClass('active');
}
}