使用锚点标签执行jquery函数


executing jquery function using anchor tag

我尝试使用标记执行一个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
        }

但是在这种方法中什么都没有发生。所以我认为应该有问题。所以我在关于我们的功能中设置了一个警报("测试")。但当刷新时,警报会弹出。但是其他代码没有执行。

我真的厌倦了做这个和那个。请帮我做这件事。如果有什么简单的方法,请告诉我。

谢谢。。

以为例

<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)时,它会再次执行,(在这种情形下,是aboutus()函数中的alert()

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

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

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

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