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