个人中心
gpt4 book ai didi

javascript - 突出显示菜单栏航点

转载 作者：行者123 更新时间：2023-11-28 12:41:36 26 4
gpt4 key购买 nike

我正在制作一个站点，并希望将此站点中的一些内容合并到我的菜单中。 http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/我真的很希望我的菜单栏根据该部分进行更改，但是我对 javascript 完全陌生并且遇到了一些麻烦。现在，它似乎没有用。有什么建议么？谢谢!这是一些代码

 <script language="javascript" type="text/javascript">
        $(function() {
        // Do our DOM lookups beforehand
        var nav_container = $(".nav-container");
        var nav = $("nav");
        nav_container.waypoint({
        handler: function(direction) {
        nav_container.toggleClass('sticky', direction=='down');

        }
        var sections = $('section');
        var navigation_links = $('nav a');
        sections.waypoint({
        handler: function(event, direction) {
        // handler code
        },
        offset: '35%'
        });
        var active_section;
        active_section = $(this);
        if (direction === "up") active_section = active_section.prev();
        var active_link = $('nav a[href="#' + active_section.attr("id") + '"]');
        navigation_links.removeClass("selected");
        active_link.addClass("selected");
        });

        $("li.nav-item").click(function() {
        $("html, body").animate({
        scrollTop: $($(this).children().attr("href")).offset().top + "px"}, {duration: 500, easing: "swing"
        });
        return false;
        });
        $(document).ready(function(){
        $('img').click(function(){
        // get the url of the picture we clicked
        var url = $(this).attr('src');
        // get the url of the large image
        var bigUrl = $('.large-picture > img').attr('src');
        // change the url of the big picture
        $('.large-picture > img').attr('src', url);
        $(this).attr('src', bigUrl);
        });
        });

        });

    </script>

菜单栏这是您在下面看到的菜单栏，它对应于整个 html 中导航导致跳转到的标记

<div class = 'nav-container'>
    <nav>
        <div id = 'nav-items-container'>
            <ul class='nav-items'>
                <li class='nav-item'><a href='#what'>what</a></li>
                <li class='nav-item'><a href='#how'>how</a></li>
                <li class='nav-item'><a href='#why'>why</a></li>
                <li class='nav-item'><a href='#who'>who</a></li>
                <li class='nav-item'><a href='#where'>where</a></li>
            </ul>
        </div>
    </nav>
</div>

标记看起来像这样

<div class = 'mark' id = 'what'></div>

标签在每个标记之前和之后使用，以设置导航将更改的所需部分

最佳答案

这对我来说效果很好。我写了一堆评论，所以希望它很清楚。 

   <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Smashing HTML5!</title>


    <style type="text/css">
    li { display:inline; background-color: #004900; padding: 4px; font-weight: bold;}
    li a { color:#fff; text-decoration: none;}

    .mark { position: absolute;  color: #fff; height: 500px; width: 100%; 
            font-size: 24px;  padding: 10px; padding-top: 50px;}

    #who{ top: 500px; background-color: #005600;}
    #what{ top: 1000px; background-color: #000078;}
    #how{ top: 1500px; background-color: #f30000;}
    #why{ top: 2000px; background-color: #00ff00;}
    #where{ top: 2500px; background-color: #000022;}

   .nav-container { z-index: 100;}

    </style> 


    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  

    <![endif]-->
    <!--[if lte IE 7]>
    <script src="js/IE8.js" type="text/javascript"></script><![endif]-->
    <!--[if lt IE 7]>

    <link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->

   <!-- DON'T FORGET TO CHANGE THESE PATHS -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="/jquery.1.10.2.min"></script>

    <script src="/waypoints/waypoints.min.js"></script>

    <script src="/waypoints/shortcuts/sticky-elements/waypoints-sticky.min.js"></script>



   <script>

        $(document).ready( function(){

       var wid;


      /*the shortcut below is all you need to make the menu
         stick to the top. --- make sure to load 
       waypoints-sticky.min.js as I have in the 
       <head> section*/
       $('.nav-container').waypoint('sticky');

        //helper function that does the high-lighting --- I've written it out 
        //step by step 
        function highlight(hl_id){
          $("li > a").css({ "background-color" : "#004900", "color": "#fff"});
          $("li").css({"background-color" : "#004900", "color": "#fff"});
          $("#" + hl_id + "-nav").css({"background-color" : "#f0f0f0", "color": "#000"});
          $("#" + hl_id + "-nav > a").css({ 
            "background-color" : "#f0f0f0", "color": "#000"});  
       }


      /* now we turn the marks into waypoints*/
      $('.mark').waypoint(function(direction) {

         /* now we get the id of the waypoint we're jumping to*/
           wid = $(this).attr("id");

     //if we're scrolling up we get "previous" waypoint
     if ( direction == 'up' ){

      var highlight_p = $('#' + wid).waypoint('prev');
      wid_p = highlight_p.attr("id");

        highlight(wid_p);

     }

    //if we're scrolling up we get last waypoint
    else if ( direction == 'down' ) {

      highlight(wid);  
    }





    });



   });//end doc ready




    </script>



    </head>

   <body id="index" class="home">

   <div class='nav-container' style="position:fixed;">
    <nav>
        <div id='nav-items-container'>
            <ul class='nav-items'>

                <li class='nav-item' id="who-nav"><a href='#who'>who</a></li>
                <li class='nav-item' id="what-nav"><a href='#what'>what</a></li>
                <li class='nav-item' id="how-nav"><a href='#how'>how</a></li>
                <li class='nav-item' id="why-nav"><a href='#why'>why</a></li>
                <li class='nav-item' id="where-nav"><a href='#where'>where</a></li>
            </ul>
        </div>
    </nav>

    </div>



    <div class='mark' id='who'>who</div>
    <div class='mark' id='what'>what</div>
    <div class='mark' id='how'>how</div>
    <div class='mark' id='why'>why</div>
    <div class='mark' id='where'>where</div>

    </body>
    </html>

关于javascript - 突出显示菜单栏航点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17642830/

26 4 0
文章推荐： css - 无法为二十一 Wordpress 主题的页脚添加我自己的背景
文章推荐： css - 为什么 Mac 版 Chrome 与 PC 版 Chrome 存在利润差异？
文章推荐： css - 对齐中心搞乱定义列表
文章推荐： html - 使用文本缩进和文本对齐
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com