Question

I've 5 different static pages: index.html syllabus-link.html advanced-linux.html contact.html gallery.html.

The functionality is quite simple - User clicks on one of the syllabus type and the user is presented with a `word file' having 2 options:

1) Download
2) View its contents.

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

Let's say, I'm on index.html page and being there, I decided to click on "Linux" option from the dropdown-menu of syllabus page. The Linux word file gets displayed on the screen with options for the user to either view it's contents or download the word file(based on jQuery condition written in syllabus page). Now that I've landed on the syllabus page and this time when I try clicking on other options viz.., "Hadoop" or "CCNA", nothing shows up. But had I tried clicking either of "Hadoop" or "CCNA" option being on index.html page, it displays the correct "word file".

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 US section

I understand that if I write <a href="#">in syllabus page, then the current issue can be fixed, but I would lose the current working functionality. How do I achieve both?

Any help would be highly appreciated !!!

的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>

免责声明：我自己无法测试，如果您有任何问题，请告诉我，我可以尝试帮助您解决这些问题。

Answer 2

一个大问题是if和else if语句中的条件应该使用字符串。

例如。 if (document.getElementById(anc) == 'linuxSyllabus')

其次，你在每个条件中使用选择器，据我所知，这些id在html中不存在。您的ID是linux，hadoop和ccna。

你想要通过href选择那些$('linux') OR，如下所示： $("a[href='#linuxSyllabus'")

我有点不确定您实际想要解决的问题，但这些问题突然出现在我面前。还可以尝试在浏览器中查看控制台，确定会发现一些错误。

Answer 3

我不知道这是你在找什么。我只是根据你的描述给出解决方案。

您可以在教学大纲中为每个教学大纲容器使用一个公共类，例如.syllabusContainer，并更改下面的js

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

教学大纲页面中的

使用与index.html相同的菜单链接

可以<a href=""> accept multiple parameters?

3 个答案: