Question

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

亲眼看看：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中滑块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事件显示/隐藏滑块

"failed to identify //h2[@id='C2__C3__HEAD_5F3EC642AC086D0C23576']"

Answer 2

我修改了我的答案。

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

希望我的指南可以帮到你。

Answer 3

我通过使用ya＆＃39; ll推荐的组合来解决这个问题。这是我的代码：

$(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 个答案: