Question

我正在投资组合网站上展示即将到来的实习面试。我正在尝试制作简历页面标签：一个用于突出显示的选项卡，一个用于工作经验，一个用于教育，一个用于参考。我已经在w3schools网站上使用this page和this page来实现这一目标，但是尽管遵循了教程，我的两个标签都没有正确显示。

＆＃34;亮点＆＃34;和＃34;工作经历＆＃34;选项卡正常工作：它们显示正确的选项卡内容，并正确突出显示当前选项卡按钮/链接。＆＃34;亮点＆＃34;选项卡还会按预期首次加载页面时显示。然而，＆＃34;教育＆＃34;和＆＃34;参考文献＆＃34;标签不显示任何内容。当前标签按钮/链接仍然正确突出显示，因此这没有问题。

我的猜测是for循环中存在一些问题我用来切换＆＃34; display：none＆＃34;和＆＃34;显示：阻止＆＃34;，但我无法完全理解确切的问题。 for循环，用于将标签分配给＆＃34; active＆＃34;为了改变当前标签的颜色似乎工作得很好。这是我第一次使用标签，因此我并不像我喜欢的那样熟悉它们。

我不太关心的第二个问题是＆＃34;要点＆＃34;首次加载页面时，按钮不会突出显示，即使该标签的内容按照预期显示在页面加载上。

我非常感谢大家提供的任何帮助！

<head>
<style>
.tab    {overflow: hidden; border: 1px solid #AE7B68;
        background-color: #AE7B68; padding: 6px 12px;}

.tab button {background-color: #AE7B68; float: left; 
            border: 1px solid #244628;
            outline: none; cursor: pointer;
            padding: 14px 16px; transition: 0.3s; font-size: 17px;}

.tab button:hover   {background-color: #EE8F0A;}

.tab button.active  {background-color: #EE8F0A;}

.tabcontent {margin-right: auto; margin-left: auto;
            padding: 6px 12px; background-color: #AE7B68;
            border: 1px solid #AE7B68; border-top: none;}
</style>
</head>

<body>
<main>
    <div class="tab"> 
        <button class="tablinks" 
        onclick="openRes(event, 'Highlights')"
        id="defaultOpen">Highlights</button>
        <button class="tablinks"
        onclick="openRes(event, 'Work')">Work History</button>
        <button class="tablinks"
        onclick="openRes(event, 'Education')">Education</button>
        <button class="tablinks"
        onclick="openRes(event, 'References')">References</button>
    </div>

    <div id="Highlights" class="tabcontent">
        CONTENT     
    </div>
    <div id="Work" class="tabcontent">
        CONTENT
    <div>
    <div id="Education" class="tabcontent">
        CONTENT    
    </div>
    <div id="References" class="tabcontent">
        CONTENT
    </div>

    <script>
        function openRes(evt, resPart)
        {
            document.getElementById("defaultOpen").click();
            var i, x, tablinks;
            // Hide all elements of class "tabcontent"
            x = document.getElementsByClassName("tabcontent");
            for (i = 0; i < x.length; i++)
            {
                x[i].style.display = "none";
            }
            //Remove "active" class from tab links
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++)
            {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(resPart).style.display = "block";
            //Add "active" to current tab link so it's highlighted
            evt.currentTarget.className += " active";
        }
    </script>
</main>

Answer 1

您没有正确关闭一个function foo() { var tf=false; function gettf() {return tf;} return {tf:tf, gettf:gettf } }; x = foo(); {tf: false, gettf: ƒ} x.tf false x.tf = true; true x.gettf() false x.tf true（您的工作标签）。 https://jsfiddle.net/amfwe17j/4/ - 这类问题经常发生，因此我建议您在https://validator.w3.org/上验证HTML以修复HTML问题，因为很多时候这些都是问题的根源。

要默认显示标签，请在https://www.w3schools.com/howto/howto_js_tabs.asp中搜索默认显示标签 - 它们会说明如何打开/突出显示默认标签，您应该这样做。

对于循环正确切换一些选项卡，但不是全部

1 个答案: