一些JavaScript和jQuery在同一页面上的冲突
我正在使用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函数）会覆盖此声明，为什么会导致问题？正如我所提到的，当它生活在显示器中时它完美地工作：块; DIV。
有任何想法吗？我不希望任何人熟悉jQuery galleria图片库...但也许是一个人如何修复这个问题的想法？
谢谢！
回答 2
Stack Overflow用户
发布于 2018-08-29 13:01:05
我的第一个建议是重新编写你原来的Javascript函数来使用jQuery。它已经具有内置的可见性切换功能......使用相同的系统可以最大限度地减少冲突并使代码更加平滑。
Stack Overflow用户
发布于 2018-08-29 14:19:24
如果你包含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');
});
});
https://stackoverflow.com/questions/-100000686
复制相似问题