使用锚标记执行jquery函数

时间:2014-04-26 16:08:03

标签: javascript php jquery html

我尝试使用标记执行jquery函数。首先,我尝试过这样的。

<a href="#about_us" onclick="aboutus()">About US</a>

这是我在单独文件中的jquery函数。

function aboutus() {

    $("#content").css({
        "display": "block",
        "opacity" : 1
    });

    $(".about_us_one").css({
        "left": ($w - 980) / 2,
        "top": 120,
        "z-index": 1000,
        "display": "block"
    });

    $(".about_us_one").animate({
        "opacity": 0.90,
        "width": 980
    }, 2500, $easing2, function() {
    });
    var $about_us_one, $contentHeight;

    $about_us_one = $(".about_us_one").height();
    $(".about_us_two").css({
        "left": ($w - 980) / 2,
        "top": 140 + $about_us_one,
        "z-index": 1000,
        "display": "block"
    });

    $(".about_us_two").animate({
        "opacity": 0.90,
        "width": 980
    }, 2500, $easing2, function() {
    });

    $contentHeight = $(document).height();
    $("#bfooter").animate({
        "top": $contentHeight,
        "margnin-top": 15
    });

    $("#splash").animate({
        "top": 0,
        "opacity": 0.75,
        "height": 100
    }, 1500, $easing2, function() {
    });

    $(".menu").animate({
        "opacity": 1,
        "top": 50,
        //"margin-top": 50
        // "height": $h
    }, 500, $easing);

    $("#slogn1").animate({
        "opacity": 1,
        "top": 50,
        //"margin-top": 50
        // "height": $h
    }, 500, $easing);
    $("#slogn2").animate({
        "opacity": 1,
        "top": 20,
        //"margin-top": 50
        // "height": $h
    }, 500, $easing);
}

使用此方法时,每件事情都可以。但如果我刷新页面。然后我必须再次点击关于我们链接查看内容。

所以这不是我真正需要做的事情。所以我尝试使用像这样的PHP从标签传递变量。

<a href="http://localhost/eventztable/home.php?name=about_us">About US</a>

$page = $_GET['name'];
        if ($page == "about_us") {
            ?>
            <script>
                aboutus();
            </script>
            <?php
        }

但是在这种方法中没有任何事情发生。所以我觉得应该有问题。所以我在我的关于我们的功能中发出警告(“测试”)。但是当刷新该警报时突然出现。但其他代码没有执行。

我真的厌倦了这样做。请帮帮我。如果有任何简单的方法请告诉我。

谢谢..

3 个答案:

答案 0 :(得分:2)

以此为例:

<a href="#aboutus" onclick="aboutus()">About Us</a>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">

function aboutus() {
    alert(123);
}

$(document).ready(function(){
    if(window.location.hash == '#aboutus') {
        $('a[href="#aboutus"]').trigger('click');
    }
});
</script>

点击链接后(初次点击)。当然,它会执行,然后当你检测到哈希(在这种情况下为#aboutus)时,它会再次执行,(在这种情况下,alert()函数内的aboutus()

答案 1 :(得分:0)

很难说没有查看所有HTML,但由于你的javascript正在编辑元素的CSS,你可能会在元素被渲染之前调用函数来编辑CSS。尝试更改以在渲染所有内容时运行该函数。

$page = $_GET['name'];
        if ($page == "about_us") {
            ?>
            <script>
                $(document).ready(function(){ 
                    aboutus();
                });
            </script>
            <?php
        }

答案 2 :(得分:0)

加载时您需要触发点击事件

<?php
$page = $_GET['name'];
        if ($page == "about_us") {
            ?>
            <script>
    $(document).ready(function(){
     $('#about_us').trigger('click');

    });
 $( "#about_us" ).on( "click", function() {
      aboutus();
    });
</script>
            <?php
        } ?>