Question

我有一个单页应用。当单击导航链接时，会有一个脚本向下滚动到相应的部分。这很好。

LIBRARY ieee;
USE ieee.std_logic_1164.ALL;

-- Uncomment the following library declaration if using
-- arithmetic functions with Signed or Unsigned values
--USE ieee.numeric_std.ALL;

ENTITY tb_tijd_FSM IS
END tb_tijd_FSM;

ARCHITECTURE behavior OF tb_tijd_FSM IS 

    -- Component Declaration for the Unit Under Test (UUT)

    COMPONENT tijd_FSM
    PORT(
         clk_1ms : IN  std_logic;
         BTU : IN  std_logic;
         BTD : IN  std_logic;
         BTR : IN  std_logic;
         mo_tijd : IN  std_logic;
         EupH : OUT  std_logic;
         EdownH : OUT  std_logic;
         EupM : OUT  std_logic;
         EdownM : OUT  std_logic;
         EupS : OUT  std_logic;
         EdownS : OUT  std_logic;
         up_down : OUT  std_logic;
         blink_tijd : OUT  std_logic_vector(1 downto 0)
        );
    END COMPONENT;


   --Inputs
   signal clk_1ms : std_logic := '0';
   signal BTU : std_logic := '0';
   signal BTD : std_logic := '0';
   signal BTR : std_logic := '0';
   signal mo_tijd : std_logic := '0';

    --Outputs
   signal EupH : std_logic;
   signal EdownH : std_logic;
   signal EupM : std_logic;
   signal EdownM : std_logic;
   signal EupS : std_logic;
   signal EdownS : std_logic;
   signal up_down : std_logic;
   signal blink_tijd : std_logic_vector(1 downto 0);

   -- Clock period definitions
   constant clk_1ms_period : time := 1 ms;

BEGIN

    -- Instantiate the Unit Under Test (UUT)
   uut: tijd_FSM PORT MAP (
          clk_1ms => clk_1ms,
          BTU => BTU,
          BTD => BTD,
          BTR => BTR,
          mo_tijd => mo_tijd,
          EupH => EupH,
          EdownH => EdownH,
          EupM => EupM,
          EdownM => EdownM,
          EupS => EupS,
          EdownS => EdownS,
          up_down => up_down,
          blink_tijd => blink_tijd
        );

   -- Clock process definitions
   clk_1ms_process :process
   begin
        clk_1ms <= '0';
        wait for clk_1ms_period/2;
        clk_1ms <= '1';
        wait for clk_1ms_period/2;
   end process;


   -- Stimulus process
   stim_proc: process
   begin        
        up_down <= '0';
        mo_tijd <= '1';

        --Hij begint in state s0

        wait for 1 ms;

        BTR <= '1'; --s1
        wait for 1 ms;
        BTR <= '0'; 
        wait for 1 ms;
        BTU <= '1';
        wait for 1 ms;
        BTU <= '0';
        wait for 1 ms;
        BTD <= '1';
        wait for 1 ms;
        BTD <= '0';
        wait for 1 ms;

        BTR <= '1'; --s2
        wait for 1 ms;
        BTR <= '0';
        wait for 1 ms;
        BTU <= '1';
        wait for 1 ms;
        BTU <= '0';
        wait for 1 ms;
        BTD <= '1';
        wait for 1 ms;
        BTD <= '0';
        wait for 1 ms;

        BTR <= '1'; -- s3
        wait for 1 ms;
        BTR <= '0';
        wait for 1 ms;
        BTU <= '1';
        wait for 1 ms;
        BTU <= '0';
        wait for 1 ms;
        BTD <= '1';
        wait for 1 ms;
        BTD <= '0'; 
      wait;
   end process;

END;

我还设置了一个脚本，这样当您向上/向下滚动页面时，相应的部分的相应导航链接将突出显示。这也很好。

$('nav a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 700);
    return true;
});

我唯一的问题是，当我点击导航链接时 - 让我说我点击最后一个链接，将您带到页面底部。在简短的动画滚动到页面底部的过程中，由于第二个脚本，当你传递它们时，沿途的各个部分会逐一突出显示。

如果单击导航项链接，该项会被高亮显示，并且某种方式滚动突出显示被禁用（但如果您开始滚动仍然有效），我想这样做。

Answer 1

将您的突出显示绑定到特殊课程，也可以将其命名为“已启用”。

在开始滚动动画之前，请将其删除，这样就不会触发突出显示。

滚动动画完成后，再次添加“启用”类，让您的设置再次正常工作。

示例：

$('nav a').click(function(){
    $(yourSelector).removeClass('enable');
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 700, function(){
        $(yourSelector).addClass('enable');
    });
    return true;
});

单页 - 导航动画滚动和突出显示的导航栏链接冲突

1 个答案: