使用一个页面中的链接链接到另一个页面的不同脚本

Using links from one page to link to different scripts from another page

本文关键字：链接 另一个 脚本 一个      更新时间：2023-09-26

好吧，所以我在代码方面很基本，但我们必须为我在学校的计算机科学课制作一个网页，其中一部分包括以前的课程安排。我将把它简化为：我在顶部有一个导航栏，其中一个选项（schedules）有一个下拉菜单，指向几个子选项（过去几年）。如果你单击主选项，它会链接到一个有按钮的页面（schedules.html）。这些按钮运行一个简单的脚本，显示嵌入在按钮下面的以前课程时间表的图片[到目前为止，所有这些都是我想要的]

我找不到如何做的是将下拉选项（过去几年）链接到时间表页面，然后在加载后运行显示图片的脚本。再说一遍，这可能是因为我真的是个新手。但我有：

HTML

         <li><a href="schedules.html">Class Schedules</a>
            <ul>
               <li><a href="?">2015</a></li> 
<!--want to happen: when select a year, loads schedule page then loads the schedule for that year, -->
               <li><a href="?">2014</a></li>
               <li><a href="?">2013</a></li>
               <li><a href="?">2012</a></li>
            </ul>         
         </li>

在一个简单的表格中显示我设置的时间表的按钮：

<tr> 
    <td>2015</td>
    <td><input type="button" value="Fall"onClick="pic1()"/></td>
    <td><input type="button" value="Spring"onClick="pic2()"/></td>
</tr>

图片的脚本：

<script type = "text/javascript">
    function pic1() /*fall 2015*/
    {
        document.getElementById("schedule").src = "fall15.png";
    }
    function pic2() /*spring 2015*/
    {
        document.getElementById("schedule").src ="spring15.png";
    }

等等。。。

<img src = "" id = "schedule"/> <!--place where the image goes-->

如果在某个地方得到了答复，我深表歉意。我找了几天，但我不确定我要找的是什么。我没有在这里包含CSS代码，因为我不认为它会影响答案，但如果有价值的话，CSS会链接到样式表。

我不确定您真正想要的是什么，因为您的示例有两个2015年的图像，但是如果您想将它们分开，这是可行的（未经测试）。

<body onload="checkYear()">
links would be:
<a href="schedules.html?year=15&season=fall">2015 Fall</a>
<a href="schedules.html?year=15&season=spring">2015 Spring</a>
<script type="text/javascript">
function checkYear(){
    var yearVal = getParameterByName('year');
    var seasonVal = getParameterByName('season');
    if(yearVal && seasonVal){
        document.getElementById("schedule").src = (seasonVal + yearVal + '.png');
    }
}
/*http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript*/
function getParameterByName(name) {
    name = name.replace(/['[]/, "''[").replace(/[']]/, "'']");
    var regex = new RegExp("[''?&]" + name + "=([^&#]*)"),
       results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/'+/g, " "));
}

实现这一点的方法之一是通过URL传递参数，然后在javascript文件中读取它们

通过像year=2015这样的url或您认为合适的url传递变量，然后用location.search.split('year=')[1]在javascript中读取它，这会为您提供所需的参数。

然后使用if-else梯形图来决定将根据年份参数显示哪些图像。

在html文件中有这个

<li><a href="schedules.html">Class Schedules</a>
    <ul>
        <li><a href="schedules.html?year=2015">2015</a></li> 
        <li><a href="schedules.html?year=2014">2014</a></li>
        <li><a href="schedules.html?year=2013">2013</a></li>
        <li><a href="schedules.html?year=2012">2012</a></li>
    </ul>         
</li>

在schedules.html文件中有这个

<tr> 
    <td id="year">Images</td>
    <td><input type="button" value="Fall"onClick="pic1()"/></td>
    <td><input type="button" value="Spring"onClick="pic2()"/></td>
</tr>  
<br/><br/>
<img src = "" id = "schedule"/>
<script>
    var param = location.search.split('year=')[1];
    if(param == 2015){
        document.getElementById("schedule").src = "https://placeholdit.imgix.net/~text?txtsize=33&txt=2015 image&w=150&h=150";
    }else if(param == 2014) {
        document.getElementById("schedule").src ="https://placeholdit.imgix.net/~text?txtsize=33&txt=2014 image&w=150&h=150";
    }else if(param == 2013) {
        document.getElementById("schedule").src ="https://placeholdit.imgix.net/~text?txtsize=33&txt=2013 image&w=150&h=150";
    }else if(param == 2012) {
        document.getElementById("schedule").src ="https://placeholdit.imgix.net/~text?txtsize=33&txt=2012 image&w=150&h=150";
    }

    function pic1() {
        document.getElementById("schedule").src = "https://placeholdit.imgix.net/~text?txtsize=33&txt=fall&w=150&h=150";
    }
    function pic2() {
        document.getElementById("schedule").src ="https://placeholdit.imgix.net/~text?txtsize=33&txt=spring&w=150&h=150";
    } 
</script>

信用

相关文章：