創建一個使用顯示/隱藏層和Z-Index更改頁面內容的下拉菜單

Question

我正在嘗試為網站創建側邊欄，該邊欄將允許用戶從下拉菜單中選擇一個項目並顯示RSS Feed。 提要將根據從列表中選擇的項目而變化。 我不確定如何完成此操作，但是我的第一個想法是使用z-index和show / hide層。 我已經設置了一層並設置了菜單，但是當選擇了另一個菜單項時，它將不允許我更改顯示的提要。 有誰知道我該怎么做？

我實時預覽了到目前為止我已經完成的工作。 它位於網站CHUD上

Answer 1

這使用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 2

您有兩種選擇：

1. 預加載所有rss提要（假設示例頁面中的<ul>是RSS提要的HTML輸出？），在文檔加載時將其全部隱藏，然后將其顯示為選中狀態

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

這是做前者的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不太熟悉，並且有一些提要，則選項1可能是最簡單的。 （再次，我假設您已經將RSS解析為HTML，因為這完全是另一個主題）。

Answer 3

這不是一回事，但這使用了簡單的CSS和HTML，並且不需要Javascript。 一點逆向工程可能會走很長一段路。

Image_switcher

它是荷蘭語，但是很簡單：將鼠標移到<a>部件上，然后圖像切換。

純CSS + HTML，無Javascript