創建一個下拉菜單，使用顯示/隱藏層和Z索引來改變頁面內容

Question

我想創建一個網站的邊欄，將允許用戶從下拉菜單中選擇一個項目，並顯示一個RSS源。 Feed將根據從列表中選擇的項目而發生變化。我不知道如何實現這一點，但我的第一個想法是使用z-index和顯示/隱藏圖層。我有一個圖層和菜單設置，但它不會允許我更改選擇不同菜單項時顯示的供稿。有誰知道我可以如何實現這一點？

我現在預覽了迄今爲止我所做的事情。它位於網站上，CHUD，

Answer 1

你有兩種選擇：

1. 預加載所有RSS源（我假設在你的榜樣頁的<ul>的是HTML輸出你的RSS源？），當你的文檔加載時隱藏它們，然後將它們顯示爲選中的

2. 使用AJAX在選擇框更改時動態獲取選定的Feed信息。

這裏的JavaScript和jQuery的版本做前者的一個簡單的例子：

HTML：

<select id="showRss"> 
    <option name="feed1">Feed 1</option> 
    <option name="feed2">Feed 2</option> 
</select> 

<div id="rssContainer"> 
    <ul id="feed1"> 
     <li>feed item 1</li> 
     <li>...</li> 
    </ul> 
    <ul id="feed2"> 
     <li>feed item 2</li> 
     <li>...</li> 
    </ul> 
    <!-- etc... --> 
</div> 

的javascript：

var rss = document.getElementById('rssContainer'); // main container 
var nodes = rss.getElementsByTagName('ul');  // collection of ul nodes 
var select = document.getElementById('showRss'); // your select box 

function hideAll() {        // hide all ul's 
    for (i = 0; i < nodes.length; ++i) { 
     nodes[i].style.display = 'none'; 
    } 
} 

select.onchange = function() {     // use the 'name' of each 
    hideAll();          // option as the id of the ul 
    var e = this[this.selectedIndex].getAttribute('name'); 
    var show = document.getElementById(e);   // to show when selected 
    show.style.display = 'block'; 
} 

hideAll(); 

的jQuery：

$('#showRss').change(function() { 
    $('#rssContainer ul').hide('slow');   // added a bit of animation 
    var e = '#' + $(':selected', $(this)).attr('name'); 
    $(e).show('slow');        // while we change the feed 
}); 

$('#rssContainer ul').hide(); 

要做選項2，您的onchange函數將處理AJAX加載。如果你不熟悉AJAX，並且有幾個feed，選項1可能是最簡單的。 （再次，我假設你已經將你的RSS解析爲HTML，因爲這是另一個話題）。

Answer 2

這使用jQuery和jFeed插件根據下拉選項替換DIV的內容。

// load first feed on document load 
$(document).ready(
    function() { 
     load_feed($('select#feedSelect')[0], 'feedDiv')); // pick first 
    } 
); 

function load_feed(ctl, contentArea) // load based on select 
{ 
    var content = $('#' + contentArea)[0]; //pick first 

    content.html('Loading feed, please wait...'); 

    var feedUrl = ctl.options[ctl.selectedIndex].value; 

    $.getFeed({ url: feedUrl, 
     function(feed) { 
      content.html(''); 
      content.append('<h1>' + feed.title + '</h1>'); 
      feed.items.each( 
       function(i,item) { 
        content.append('<h2><a href="' 
            + item.link 
            + '">' 
            + feed.title 
            + '</a></h2>'); 
        content.append('<p>' + feed.description + '</p>'); 
       } 
      ); 
     } 
    }); 
} 

HTML

<div> 
    <select id=feedSelect onchange="load_feed(this,'feedDiv');" > 
     <option value='url-to-first-feed' text='First Feed' selected=true /> 
     <option value='url-to-second-feed' text='Second Feed' /> 
     ... 
    </select> 
    <div id='feedDiv'> 
    </div> 
</div> 

Answer 3

這不完全相同的事情，但這使用簡單的CSS和HTML，並且不需要Javascript。有些逆向工程可能會有很長的路要走。

Image_switcher

它在荷蘭，但其實很簡單：將鼠標移到該<a>部分和圖像切換。

純CSS + HTML，無Javascript