javascript - 创建使用显示/隐藏图层和 Z-Index 更改页面内容的下拉菜单

Question

我正在尝试为一个站点创建一个侧边栏，允许用户从下拉菜单中选择一个项目并显示一个 RSS 提要。提要会根据从列表中选择的项目而改变。我不知道如何实现这一点，但我的第一个想法是使用 z-index 和显示/隐藏图层。我有一层和菜单设置，但它不会让我在选择不同的菜单项时更改显示的馈送。有谁知道我怎么能做到这一点？

我对到目前为止所做的事情进行了实时预览。它位于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

这并不完全相同，但这使用了简单的 CSS 和 HTML，并且不需要 Javascript。一点逆向工程可以走很长的路。

Image_switcher

它是荷兰语，但很简单：将鼠标移到<a>零件上，图像就会切换。

纯 CSS+HTML，没有 Javascript

Answer 3

你有两个选择：

1. 预加载所有 rss 提要（我假设您<ul>的示例页面中的 's 是您的 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，因为这完全是另一个主题）。