禁用Javascript元素不适用于php DOM

Question

我有一个index.php页面，可根据用户点击将内容加载到div。 此index.php页面的顶部包含一个滑块。 除“关于我们”链接外，所有其他页面/内容区域都应具有滑块。 当我单击关于我们时，我希望禁用滑块，然后在单击任何其他链接时放回该滑块。

自己看看：首页

以下是加载每个页面内容的代码：

<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中的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代码...我尝试在其中添加一些代码以禁用页面加载时的滑块，但由于某些原因，它无法正常工作。

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

Answer 1

使用hashchange事件显示/隐藏滑块

$(window).on( 'hashchange', function(e) {
var hash = window.location.hash;
if (hash == '#aboutus') {
$('#slider').hide();
} else {
$('#slider').show();
}

Answer 2

我已经修改了答案。

//If you wanted to show 
var type = window.location.hash.substr(1);
if (type === 'aboutus') {
    $('#slider').hide();
} else {
    $('#slider').show();
}

希望我的指导方针可以对您有所帮助。

Answer 3

我通过结合使用您会推荐的方法来解决此问题。 这是我的代码：

$(window).on( 'hashchange', function(e) {
    var hash = window.location.hash;
    if (hash == '#aboutus') {
        $('#slider').hide(); 
    } else {
        $('#slider').show(200);
    }
});

Answer 4

您可以将其添加到click功能的开头...

$(".menuitem").on("click", function (e) {

    if ($(this).attr('id') == 'aboutus')
        $('div#wrapper').hide();
    else
        $('div#wrapper').show();

    ..............

禁用Javascript元素不适用于php DOM

问题描述

4 个解决方案

解决方案1
1 已采纳 2017-10-17 05:59:51

解决方案2
1 2017-10-17 06:45:09

解决方案3
1 2017-10-17 09:36:23

解决方案4
0 2017-10-17 05:58:46

禁用Javascript元素不适用于php DOM

问题描述

4 个解决方案

解决方案1 1 已采纳 2017-10-17 05:59:51

解决方案2 1 2017-10-17 06:45:09

解决方案3 1 2017-10-17 09:36:23

解决方案4 0 2017-10-17 05:58:46

解决方案1
1 已采纳 2017-10-17 05:59:51

解决方案2
1 2017-10-17 06:45:09

解决方案3
1 2017-10-17 09:36:23

解决方案4
0 2017-10-17 05:58:46