Javascript 可以<；a href>；是否接受多个参数？_Javascript_Jquery_Html

Javascript 可以<；a href>；是否接受多个参数？

javascript jquery html

Javascript 可以<；a href>；是否接受多个参数？,javascript,jquery,html,Javascript,Jquery,Html,我有5个不同的静态页面：index.html教学大纲link.htmladvanced linux.htmlcontact.htmlgallery.html 功能非常简单-用户单击其中一种教学大纲类型，用户将看到一个“word文件”，该文件有两个选项： 1）下载 2）查看其内容。教学大纲菜单标题不可单击，但当用户将鼠标悬停在其上时，它会在其下拉菜单中列出教学大纲类型比如说，我在index.html页面上，我决定点击教学大纲页面下拉菜单中的“Linux”选项。Linuxword文件将显示在屏

我有5个不同的静态页面：

index.html

教学大纲link.html

advanced linux.html

contact.html

gallery.html

功能非常简单-用户单击其中一种教学大纲类型，用户将看到一个“word文件”，该文件有两个选项：

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

教学大纲菜单标题不可单击，但当用户将鼠标悬停在其上时，它会在其下拉菜单中列出教学大纲类型

比如说，我在

index.html

页面上，我决定点击教学大纲页面下拉菜单中的“Linux”选项。Linux

word文件将显示在屏幕上，用户可以选择查看其内容或下载word文件（，基于教学大纲页面中编写的jQuery条件）。现在我已经登陆了教学大纲页面，这次当我尝试点击其他选项，即“Hadoop”或“CCNA”时，什么都没有显示。但如果我尝试单击index.html
页面上的“Hadoop”或“CCNA”选项，它会显示正确的“word文件”
功能与所示类似==>>https://www.atcs.com/
关于我们
部分
我明白如果我写
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>

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

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














教学大纲链接.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>

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

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


















单击word图标以查看
完整的Linux教学大纲：



或

单击word图标下载
完整的Linux教学大纲：


单击word图标以查看
完整的Hadoop教学大纲：



或

单击word图标下载
完整的Hadoop教学大纲：


单击PDF图标查看
完整的CCNA教学大纲：



或

点击PDF图标下载
完整的CCNA教学大纲：



教学大纲链接中的JS文件.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>

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

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


$（文档）.ready（函数（）{
var anc=window.location.href.split（“#”）[1]；
var pageURL=$（位置）.attr（“href”）；
if（document.getElementById（anc）==LinuxCelletus）{
$（“#Hadoop教学大纲”）.hide（）；
$（“#ccnaSyllabus”）.hide（）；
$（“#LinuxCelletus”）.show（）；
}else if（document.getElementById（anc）==Hadoop教学大纲）{
$（“#LinuxCelletus”）.hide（）；
$（“#ccnaSyllabus”）.hide（）；
$（“#Hadoop教学大纲”）.show（）；
}else if（document.getElementById（anc）==ccnaSyllabus）{
$（“#LinuxCelletus”）.hide（）；
$（“#Hadoop教学大纲”）.hide（）；
$（“#ccnaSyllabus”）.show（）；
}
});
一个大问题是if
和else if
语句中的条件应该使用字符串
例如，if（document.getElementById（anc）='LinuxCelletus'）

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

您将希望选择$（'linux'）或通过如下href：
$（“a[href=”#LinuxCelletus'）

我有点不确定您实际要解决的问题，但这些都是一些代码问题。另外，请尝试检查浏览器中的控制台，您肯定会看到一些错误。
我不知道这是否是您要解决的问题。我只是提供一个从您的描述中可以理解的解决方案
您可以对教学提纲中的每个教学提纲容器使用一个公共类，如
<script type="text/javascript">
  $(document).ready(function() {
    var anc = window.location.href.split('#')[1];
    var pageURL = $(location).attr("href");
    $(".syllabusContainer").hide();
    $("#"+anc).show();
  });
</script>


$（文档）.ready（函数（）{
var anc=window.location.href.split（“#”）[1]；
var pageURL=$（位置）.attr（“href”）；
$（“.cytaluscontainer”）.hide（）；
$（“#”+anc.show（）；
});

在教学大纲页面中，使用与index.html相同的菜单链接
感谢您更清楚地说明了您要完成的任务，您添加的html和javascript