2015-11-19 107 views
0

好吧,所以我很基本的代碼,但我們必須在學校爲我的計算機科學課程製作一個網頁,其中一節包括以前的課程安排。我將簡化它:我有一個導航欄在頂部,一個選項(時間表)有一個下拉菜單到幾個子選項(過去幾年)。如果你點擊主選項,它鏈接到一個頁面(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值與任何值得關聯的樣式錶鏈接的話。

+1

你需要給在''的

  • 2015
  • href'鏈接' – ozil

    回答

    1

    我不確定你真的在尋找什麼,因爲你的例子有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, " ")); 
    } 
    

    1

    的這樣做的方法之一是通過URL傳遞參數,然後讀取它們在你的JavaScript文件

    傳遞變量通過URL像year=2015或任何你認爲合適的然後在你的javascript中用location.search.split('year=')[1]讀取它,它給你你需要的參數。

    然後使用if else梯形圖根據year參數決定顯示哪些圖像。

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

    credit