Question

我正在使用JavaScript函数和一些jQuery在页面上执行两个操作。第一个是一个简单的JS函数来隐藏/显示div并更改选项卡的活动状态：

这是显示/隐藏div并在某些选项卡上更改活动状态的JS：

var ids=new Array('section1','section2','section3');

function switchid(id, el){  
    hideallids();
    showdiv(id);

    var li = el.parentNode.parentNode.childNodes[0];
    while (li) {
        if (!li.tagName || li.tagName.toLowerCase() != "li")
            li = li.nextSibling; // skip the text node
        if (li) {
          li.className = "";
          li = li.nextSibling;
        }
    }
    el.parentNode.className = "active";
}

function hideallids(){
    //loop through the array and hide each element by id
    for (var i=0;i<ids.length;i++){
        hidediv(ids[i]);
    }         
}

function hidediv(id) {
    //safe function to hide an element with a specified id
        document.getElementById(id).style.display = 'none';
}

function showdiv(id) {
    //safe function to show an element with a specified id        
        document.getElementById(id).style.display = 'block';
}

html：

<ul>
<li class="active"><a onclick="switchid('section1', this);return false;">ONE</a></li>
<li><a onclick="switchid('section2', this);return false;">TWO</a></li>
<li><a onclick="switchid('section3', this);return false;">THREE</a></li>
</ul>

<div id="section1" style="display:block;">TEST</div>
<div id="section2" style="display:none;">TEST 2</div>
<div id="section3" style="display:none;">TEST 3</div>

现在问题....

我已将名为galleria的jQuery图库添加到其中一个标签中。当它位于最初显示为div的div中时，该库工作得很好。但是，当它位于其中一个设置为display：none的div中时;当div被切换为可见时，库的一部分不起作用。具体来说，以下css不再被写（这是由galleria jQuery创建的）：

element.style  {
display:block;
height:50px;
margin-left:-17px;
width:auto;
}

对于我的生活，当它的div设置为display：none时，我无法弄清楚为什么画廊会失败。由于在单击选项卡时会覆盖此声明（通过上面的Javascript函数），为什么会导致问题？正如我所提到的，当它生活在显示器中时它完美地工作：块;格。

有什么想法吗？我不希望任何人熟悉jQuery galleria图片库...但也许想一想如何修复这个问题？

谢谢！

Answer 1

如果你包含jQuery，那么你可以缩短你的javascript：

$(function() {

var sections = $('#section1, #section2, #section3');
function switchid(id, el){  
    sections.hide();
    $('#'+id).show();
    $(this).addClass('active').closest('ul').find('li').removeClass('active');
}

});

我还会删除设置display:none的内联样式。然后你可以在你的javascript中初始化广场，然后隐藏你的部分。

类似的东西：

$(function() {

$('#section2, #section3').hide();
$('#section2 .images').galleria();

var sections = $('#section1, #section2, #section3');
function switchid(id, el){  
    sections.hide();
    $('#'+id).show();
    $(this).addClass('active').closest('ul').find('li').removeClass('active');
}

});

我甚至会更进一步，将你的html更改为：

<ul class="sectionlinks">
<li class="active"><a href="#section1">ONE</a></li>
<li><a href="#section2">TWO</a></li>
<li><a href="#section3">THREE</a></li>
</ul>

<div id="section1" class="section">TEST</div>
<div id="section2" class="section">TEST 2</div>
<div id="section3" class="section">TEST 3</div>

然后你的javascript可能只是：

$(function() {

$('#section2 .images').galleria();
$('#section2, #section3').hide();

var sections = $('.section');
$('.sectionlinks a').click(function(e){
    e.preventDefault();
    sections.hide();
    $($(this).attr('href')).show();
    $(this).closest('ul').find('li').removeClass('active');
    $(this).closest('li').addClass('active');
});

});

工作示例：http://jsfiddle.net/cdaRu/2/

Answer 2

默认情况下将它们全部设置为“阻止”，初始化galleria图库，然后隐藏您想要隐藏的div，看看是否能修复它。或者尝试在每次切换后再次初始化图库。

Answer 3

我的第一个建议是重新编写原始Javascript函数以使用jQuery。它已具有内置的可见性切换功能......使用相同的系统可以最大限度地减少冲突并使代码更加顺畅。

Answer 4

这只是“袖手旁观”，但也许盒子模型不完整：“元素根本不会产生任何盒子”display: none;

或许将其更改为“阻止”并设置visibility: hidden;会更好？

一些JavaScript和jQuery在同一页面上的冲突

4 个答案: