我有一个index.php页面，它根据用户点击将内容加载到div中。此 index.php 页面在顶部包含一个 slider 。除了“关于我们”链接之外，所有不同的页面/内容区域都应该有 slider 。当我单击“关于我们”时，我希望禁用 slider ，然后在单击任何其他链接时将其放回。
亲自看看:home
以下是加载每个页面内容的代码:
<body class="body">
<!--turn into markup-->
<div id="container">
<div id="header">
<?php include ( "header.php")?> //this header.php file contains the slider I want to hide when About Us page is active
</div>
<div id="contentarea">//here is where the content for each page is loaded</div>
</div>
<div id="footer-container">
<?php include ( "footer.php")?>
</div>
// ...js scripts... //
<script type="text/javascript">
//this javascript code loads the slider and the content in #contentarea
//Slider
$('#slider').nivoSlider({
effect: 'random',
animSpeed: 2000,
pauseTime: 6000,
randomStart: true,
directionNav: false,
controlNav: false,
controlNavThumbs: false
});
//Jquery loader
function getHash() {
return window.location.hash
}
$(".menuitem").on("click", function (e) {
page = this.href.replace("#", "") + ".html",
hash = $(this).prop("hash");
$('#contentarea').load(page, function () {
if (page.match("home.html")) {
history.pushState('', document.title, window.location.pathname);
} else {
location.hash = hash;
}
var divHeight = $('#content').height();
$('#contentarea').height(divHeight);
$("html, body").animate({
scrollTop: $(this).height()
}, "7000");
});
});
//on pageload
history.pushState
var hash = getHash();
if (hash) {
$("a[href='" + hash + "']").trigger("click");
} else {
$("a[href='#home']").trigger("click");
}
</script>
以下是 header.php 中 slider div 的代码:
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/slide-1.jpg" />
<img src="images/slide-2.jpg" />
<img src="images/slide-3.jpg" />
<img src="images/slide-4.jpg" />
</div>
</div>
</div>
这是我的“关于我们”内容部分的 js 代码...我尝试在那里添加一些代码来禁用页面加载时的 slider ，但由于某种原因，它不起作用。
<div id="content" class="cms-editable">
<div id="page-title">ABOUT US.</div>
<!-- Here is the content for the About Us section -->
</div>
<script>
$(document).on('click','.close_box',function(){
$(this).parent().fadeTo(300,0,function(){
$(this).remove();
});
jQuery(document).ready(function ($) {
// disable slider THIS CODE DOESN'T WORK AS EXPECTED
$(this).parents("#slider").children().attr("disabled","disabled");
});
</script>
最佳答案
使用 hashchange 事件显示/隐藏 slider
$(window).on( 'hashchange', function(e) {
var hash = window.location.hash;
if (hash == '#aboutus') {
$('#slider').hide();
} else {
$('#slider').show();
}
关于javascript - 禁用 Javascript 元素不适用于 php DOM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46783313/