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

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

javascript html css

Javascript 使用一个页面的链接链接到另一个页面的不同脚本,javascript,html,css,Javascript,Html,Css,好的，我在代码方面非常基础，但我们必须为我在学校的计算机科学课制作一个网页，其中一个部分包括以前的课程安排。我将其简化为：我在顶部有一个导航栏，一个选项（schedules）有一个下拉菜单，其中有几个子选项（过去的年份）。如果单击主选项，它将链接到一个页面（schedules.html）有按钮的地方。这些按钮运行一个简单的脚本，显示嵌入在按钮正下方的以前课程安排的图片[到目前为止，所有这些都是我想要的] 我不知道如何做的是将下拉选项（过去几年）链接到schedules页面，然后在加载图片后运行显

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

我不知道如何做的是将下拉选项（过去几年）链接到schedules页面，然后在加载图片后运行显示该图片的脚本。再说一次，可能是因为我对这件事还不太熟悉。但我有以下几点：

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>

HTML

显示我在简单表格中设置的明细表的按钮：

<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";
    }


函数pic1（）/*2015年秋季*/
{
document.getElementById（“schedule”）.src=“fall15.png”；
}
函数pic2（）/*2015年春季*/
{
document.getElementById（“schedule”）.src=“spring15.png”；
}

等等

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

如果有人回答了这个问题，我道歉。我找了几天，但我不确定我在找什么。我没有在这里包括CSS代码，因为我不认为它会影响答案，但是CSS链接到一个样式表，如果它有价值的话

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


链接将是：
函数checkYear（）{
var yearVal=getParameterByName（'year'）；
var seasureval=getParameterByName（'seasure'）；
如果（年份值和季节值）{
document.getElementById（“schedule”）.src=（季节值+年份值+'.png'）；
}
}
/*http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript*/
函数getParameterByName（名称）{
name=name.replace（/[\[]/，“\\[”）。replace（/[\]]/，“\\]”）；
var regex=new RegExp（“[\\？&]”+name+“=（[^&\]*）”，
results=regex.exec（location.search）；
返回结果===null？”：decodeURIComponent（结果[1]。替换（/\+/g，”）；
}

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

通过url传递变量，如

year=2015

或您认为合适的url，然后使用

location.search.split（'year='）[1

]在javascript中读取变量，该url为您提供了所需的参数

然后使用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>

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

在schedules.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>

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


图像



var param=location.search.split（'year='）[1]；
如果（参数=2015）{
document.getElementById（“计划”）.src=”https://placeholdit.imgix.net/~text？txtsize=33&txt=2015图像&w=150&h=150“；
}否则如果（参数=2014）{
document.getElementById（“计划”）.src=”https://placeholdit.imgix.net/~text？txtsize=33&txt=2014图像&w=150&h=150“；
}否则如果（参数==2013）{
document.getElementById（“计划”）.src=”https://placeholdit.imgix.net/~text？txtsize=33&txt=2013图像&w=150&h=150“；
}否则如果（参数==2012）{
document.getElementById（“计划”）.src=”https://placeholdit.imgix.net/~text？txtsize=33&txt=2012图像&w=150&h=150“；
}
函数pic1（）{
document.getElementById（“计划”）.src=”https://placeholdit.imgix.net/~text？txtsize=33&txt=fall&w=150&h=150“；
}
函数pic2（）{
document.getElementById（“计划”）.src=”https://placeholdit.imgix.net/~text？txtsize=33&txt=spring&w=150&h=150“；
}

您需要在


的href
中提供链接