Material Design lite:mdl-layout__tab-bar和页面滚动

时间:2016-11-23 15:05:31

标签: javascript material-design material-design-lite

我有一个mdl-layout__tab-bar,导航栏中有一些链接。我希望这些链接能够触发页面滚动到页面的各个部分。

我尝试了以下解决方案:

# the targeted section starts with the <a name="myTargetedSection" id="myTargetedSection"></a> tag
<div class="mdl-layout__tab-bar">
    <a href="#myTargetedSection" class="mdl-layout__tab is-active">My link</a>
    ...
</div>

这不起作用,也不起作用

<div class="mdl-layout__tab-bar">
    <a href="#myTargetedSection" class="mdl-layout__tab" onclick="elmnt = document.getElementById('myTargetedSection'); scrollTo(document.body, elmnt.offsetTop, 600);">My link</a>
    ...
</div>

似乎mdl-layout__tab链接仅适用于mdl-layout__tab-panel元素。我发现的(不满意的)解决方案是使用常规的mdl-navigation__link链接,但这些链接没有底边框,并且不能在小屏幕上浏览。

有什么想法吗?谢谢!

1 个答案:

答案 0 :(得分:0)

已解决:以下代码正常工作

        Console.WriteLine("\tVälkommen till Ryggsäcken!!\n");
        Console.WriteLine("\t[1] Lägg till ett föremål i det stora facket");
        Console.WriteLine("\t[2] Lägg till ett föremål i ytterfacket");
        Console.WriteLine("\t[3] Skriv ut innehållet i stora facket");
        Console.WriteLine("\t[4] Skriv ut innehållet i ytterfacket");
        Console.WriteLine("\t[5] Rensa innehållet i stora facket");
        Console.WriteLine("\t[6] Rensa innehållet i ytterfacket");
        Console.WriteLine("\t[7] Avsluta\n");

        string[] ytterFack = new string[4];
        List<string> storaFacket = new List<string> { };
        int i = 0;

        bool kör = true;

        do 
        {
            Console.Write("\n\tVälj punkt från menyn: ");

            try
            {
                int menyVal = Convert.ToInt32(Console.ReadLine());

                switch (menyVal)
                {
                    case 1:
                        Console.Write("\n\tSkriv in ett föremål: ");
                        storaFacket.Add(Console.ReadLine());
                        //Console.WriteLine("\n\tDu har lagt in " +  + " Tack!\n");
                        break;
                    case 2:
                        Console.Write("\n\tSkriv in ett föremål: ");

                        if (ytterFack[0] == null)
                        {
                            ytterFack[0] = Console.ReadLine();
                            break;
                        }

                        else if (ytterFack[1] == null)
                        {
                            ytterFack[1] = Console.ReadLine();
                            break;
                        }
                        else if (ytterFack[2] == null)
                        {
                            ytterFack[2] = Console.ReadLine();
                            break;
                        }
                        else if (ytterFack[3] == null)
                        {
                            ytterFack[3] = Console.ReadLine();
                            break;
                        }


                        else
                        {
                            Console.WriteLine("\n\tFacket är fullt och måste tömmas innan du kan lägga ner föremål här.");
                            break;
                        }
                        break;

                    case 3:
                        Console.WriteLine("\n\tInnehållet i stora facket är:\n");
                        foreach (string item in storaFacket)
                        {
                                Console.WriteLine("\t" + item);
                        }
                        break;
                    case 4:
                        Console.WriteLine("\n\tInnehållet i ytterfacket är:\n");
                        foreach (string item in ytterFack)
                        {
                            Console.WriteLine("\t" + item);
                        }
                        break;
                    case 5:
                        storaFacket.Clear();
                        Console.WriteLine("\n\tNu är stora facket tömt!\n");
                        break;
                    case 6:
                        Array.Clear(ytterFack, 0, ytterFack.Length);
                        Console.WriteLine("\n\tNu är ytterfacket tömt!\n");
                        break;
                    case 7:
                        kör = false;
                        break;
                    default:
                        Console.WriteLine("\n\tDu måste välja från menyn, [1] - [7]");
                        break;

                }
            }
            catch
            {
                Console.WriteLine("\n\tDu kan bara mata in ett val (en siffra) från menyn!");
            }
        }
        while (kör);
    }