使用jquery contains获取一个元素并添加类

Question

我正在尝试创建动态导航。当屏幕大小是手机的大小时，我使用的是引导列表组，但当我调整大小时，使用的是导航药丸。我想做的是用活动类捕获当前元素，这样当我调整窗口大小时，它会添加类"活动"，其中ever标记包含保存在变量currentTab中的文本。目前我知道我正在进入changeActive函数，并有文本，但我无法获得它来添加活动类。

<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-->

Javascript

$( 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
 });
});

我创建了一个不同的解决方案，而不是使用contains，所以我将把它发布在这里，这样人们就知道我已经离开了，但如果有人真的有一个使用contains的解决方案的话，我会查看并选择作为解决方案。

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');
        }
}

Answer 1

我看到了你的代码，我认为这是一个误解，你在文档准备好的时候使用了你的函数，所以你的函数$( window ).resize()只运行一次（当加载DOM时），即使你调整窗口的大小，DOM也不会改变，因为你重新加载了页面，此时你的函数会运行，但同时你的活动元素会丢失，页面会选择默认元素，所以我建议使用函数：

$( window ).resize(function() {
    //console.log("window size"+$(window).width());
    //Here your code that change each time that you resize your window
});

我想你想创建一个响应设计页面，它更简单，只需添加css和使用bootstrap功能，只需组合@media(max-min width)并添加collapse boostrap，这就是一个明显的例子：http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_band_complete&堆叠=h