Question

我正在尝试创建动态导航。当屏幕大小是手机的屏幕大小我使用引导列表组但是当我调整大小时我使用导航丸。我要做的是用活动类捕获当前元素，这样当我调整窗口大小时，它将添加类“active”，其中包含保存在变量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的不同解决方案，所以我将在此处发布，以便人们知道我已经继续前进，但如果某人实际上有使用包含的解决方案，我将检查选择作为解决方案。

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

我看到你的代码，我觉得有一个误解，你正在使用你的函数就在文档准备就绪时，所以你的函数.example { left: 15%; right: 15%; }只运行一次（当DOM加载时）即使你调整窗口的大小，DOM不会改变，因为你重新加载页面，在这一刻你的函数运行，但同时你的活动元素将丢失，页面将选择默认元素，所以我建议使用函数：

$( window ).resize()

我想你想创建一个响应设计页面，只需添加css并使用bootstrap功能就更简单了，只需合并$( window ).resize(function() { //console.log("window size"+$(window).width()); //Here your code that change each time that you resize your window });并添加@media(max-min width)，这是一个明显的例子： http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_band_complete&stacked=h

使用jquery包含获取元素并添加类

1 个答案: