javascript - 可以接受多个参数吗？

Question

我有 5 个不同的静态页面:index.html syllabus-link.html advanced-linux.html contact.html gallery.html .

功能非常简单 - 用户单击其中一种教学大纲类型，然后会向用户显示一个包含 2 个选项的“word 文件”:

1) 下载
2) 查看其内容。

The syllabus menu-header is not clickable, but when the user hovers on it, it would list the syllabus types in its dropdown-menu.

假设我正在使用 index.html页面并在那里，我决定从教学大纲页面的下拉菜单中单击“Linux”选项。 Linux word file显示在屏幕上，并提供选项供用户查看其内容或下载单词文件(基于教学大纲页面中编写的 jQuery 条件)。现在我已经登陆了教学大纲页面，这次当我尝试单击其他选项(即“Hadoop”或“CCNA”)时，什么也没有显示。但是我是否尝试单击 index.html 上的“Hadoop”或“CCNA”选项？页面，它显示正确的“word 文件”。

From external page ==> click works

Being on syllabus page ==> click doesn't work

Functionality is similar to what is shown ==>> https://www.atcs.com/ ABOUT USsection

我明白如果我写<a href="#">在教学大纲页面中，那么当前的问题可以得到解决，但我会失去当前的工作功能。我如何实现这两个目标？

任何帮助将不胜感激!!!

index.html

<div class="row">
    <div class="headerlogo four columns">
        <div class="logo">
            <a href="index.html">
            <h4>Linux classes</h4>
            </a>
        </div>
    </div>
    <div class="headermenu eight columns noleftmarg">
        <nav id="nav-wrap">
            <ul id="main-menu" class="nav-bar sf-menu">
                <li class="current"><a href="index.html">Home</a></li>
                <li><a>Syllabus</a>
                    <ul class="syllabus-options">
                        <li><a href="syllabus-link.html#linuxSyllabus"><strong>Linux</strong></a></li>
                        <li><a href="syllabus-link.html#hadoopSyllabus"><strong>Hadoop</strong></a></li>
                        <li><a href="syllabus-link.html#ccnaSyllabus"><strong>CCNA</strong></a></li>
                    </ul>
                </li>
                <li><a href="advanced-linux.html">Advanced Linux</a></li>
                <li><a href="contact.html">Contact Me</a></li>
                <li><a href="gallery.html">Personal Gallery</a></li>
            </ul>
        </nav>
    </div>
</div>

教学大纲-link.html

<div class="row">
        <div class="headerlogo four columns">
            <div class="logo">
                <a href="index.html">
                <h4>Linux classes</h4>
                </a>
            </div>
        </div>
        <div class="headermenu eight columns noleftmarg">
            <nav id="nav-wrap">
            <ul id="main-menu" class="nav-bar sf-menu">
                <li class="current">
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a>Syllabus</a>
                    <ul class="syllabus-options">
                        <li><a href="#linuxSyllabus"  id="linux"><strong>Linux</strong></a></li>
                        <li><a href="#hadoopSyllabus" id="hadoop"><strong>Hadoop</strong></a></li>
                        <li><a href="#ccnaSyllabus"   id="ccna"><strong>CCNA</strong></a></li>                  
                    </ul>
                </li>
                <li>
                    <a href="advanced-linux.html">Advanced Linux</a>
                </li>
                <li>
                    <a href="contact.html">Contact Me</a>
                </li>
                <li>
                    <a href="gallery.html">Personal Gallery</a>
                </li>
            </ul>
            </nav>
        </div>
    </div>


<div id="linuxSyllabus" style="text-align: center;">  
        <!-- GOOGLE MAP IFRAME -->
        <font color="red"><h5>
                <b>Click on the word icon to <font color="blue"><blink>View
                        </blink></font> the complete Linux syllabus:
                </b>
            </h5></font>

        <p align="center">
            <a href="syllabus.htm" view> <img border="0"
                src="images/icon_word.png" alt="syllabus" width="75" height="75">
            </a>
        </p>
        <br> <font color="red" size="20px"><b> OR </b></font><br> <font
            color="red"><h5>
                <b>Click on the word icon to <font color="blue"><blink>Download
                        </blink></font> the complete Linux syllabus:
                </b>
            </h5></font>

        <p align="center">
            <a href="documents/0- Linux-Syllabus-Jan-2015.rtf" download> <img
                border="0" src="images/icon_word.png" alt="syllabus" width="75"
                height="75">
            </a>
        </p>
    </div>

    <div id="hadoopSyllabus" style="text-align: center;">
        <!-- GOOGLE MAP IFRAME -->
        <font color="red"><h5>
                <b>Click on the word icon to <font color="blue"><blink>View
                        </blink></font> the complete Hadoop syllabus:
                </b>
            </h5></font>

        <p align="center">
            <a href="syllabus.htm" view> <img border="0"
                src="images/icon_word.png" alt="syllabus" width="75" height="75">
            </a>
        </p>
        <br> <font color="red" size="20px"><b> OR </b></font><br> <font
            color="red"><h5>
                <b>Click on the word icon to <font color="blue"><blink>Download
                        </blink></font> the complete Hadoop syllabus:
                </b>
            </h5></font>

        <p align="center">
            <a href="documents/0- Linux-Syllabus-Jan-2015.rtf" download> <img
                border="0" src="images/icon_word.png" alt="syllabus" width="75"
                height="75">
            </a>
        </p>
    </div>
    
    <div id="ccnaSyllabus" style="text-align: center;"> 
            
        <font color="red"><h5>
                <b>Click on the PDF icon to <font color="blue"><blink>View
                        </blink></font>the complete CCNA syllabus:<br><br>  
                    
                    <a href="documents/2- CCNA-Syllabus.pdf" target="_blank">
                    <img border="0" src="images/icon_pdf.jpg" alt="syllabus" width="75" height="75">
                    </a>        
                </b>
            </h5></font>
        
        <br> <font color="red" size="20px"><b> OR </b></font><br> <font
            color="red"><h5>
                <b>Click on the PDF icon to <font color="blue"><blink>Download
                        </blink></font> the complete CCNA syllabus:
                </b>
            </h5></font>

        <p align="center">
            <a href="documents/2- CCNA-Syllabus.pdf" download> <img
                border="0" src="images/icon_pdf.jpg" alt="syllabus" width="75"
                height="75">
            </a>
        </p>
    </div>

syllabus-link.html 中的 JS 文件

<script type="text/javascript">
    $(document).ready(function() {
        var anc = window.location.href.split('#')[1];
        var pageURL = $(location).attr("href");

        if (document.getElementById(anc) == linuxSyllabus) {
            $("#hadoopSyllabus").hide();
            $("#ccnaSyllabus").hide();
            $("#linuxSyllabus").show();

        } else if (document.getElementById(anc) == hadoopSyllabus) {
            $("#linuxSyllabus").hide();
            $("#ccnaSyllabus").hide();
            $("#hadoopSyllabus").show();

        } else if (document.getElementById(anc) == ccnaSyllabus) {
            $("#linuxSyllabus").hide();
            $("#hadoopSyllabus").hide();
            $("#ccnaSyllabus").show();
        }
    });
</script>

Answer 1

感谢您更清楚地说明您想要完成的任务，您添加的 html 和 javascript 有很大帮助。您看到的问题是 JavaScript 仅在页面加载时运行一次。我建议将其包装在一个函数中，这样您就可以在页面加载时调用它，就像您现在所做的那样，以及每次单击其中一个链接时。

教学大纲中的 js 文件

<script type="text/javascript">
    $(document).ready(function() {

        // this will get called when you want to swap the visible div
        function updateVisibleDiv(viewName) {
            // we are going to pass in a string as viewName, we want to check it against a string
            // also, I added show for each syllabus, since we will be calling this to change
            // which syllabus is visible, we have to show the one they select
            if (viewName == 'linuxSyllabus') {
                $("#hadoopSyllabus").hide();
                $("#ccnaSyllabus").hide();
                $("#linuxSyllabus").show();
            } else if (viewName == 'hadoopSyllabus') {
                $("#linuxSyllabus").hide();
                $("#ccnaSyllabus").hide();
                $("#hadoopSyllabus").show();
            } else if (viewName == 'ccnaSyllabus') {
                $("#linuxSyllabus").hide();
                $("#hadoopSyllabus").hide();
                $("#ccnaSyllabus").show();
            }
        }

        // this will get run on page load - I like wrapping it in a function to make
        // it more clear what we are doing on page initialization
        function init() {
            var syllabus = window.location.href.split('#')[1];
            // syllabus should equal one of ['linuxSyllabus', 'hadoopSyllabus', 'ccnaSyllabus']
            // we pass it in to our function, and it loads the correct screen
            // up to this point, the page will work the same as it always has, this is just a refactor
            updateVisibleDiv(syllabus);
        }

        // this will be the new functionality that updates which syllabus is visible
        // this will be called when a link is clicked
        function updateView() {
            // get the value in your href from the clicked link
            var syllabus = this.getAttribute('href').split('#')[1];
            // now we will just update the visible div
            updateVisibleDiv(syllabus);
        }

        // we are going to attach a click event to those three links
        // this is selecting all 3 links by their id, and adding an on click event handler
        $('#linux, #hadoop, #ccna').on('click', updateView);

        // call the init function to initialize the page
        init();
    });
</script>

免责声明:我无法亲自对此进行测试，如果您有任何问题，请告诉我，我可以尽力帮助您解决这些问题。