使用显示/隐藏图层和Z-Index创建更改页面内容的下拉菜单
-
08-07-2019 - |
题
我正在尝试为网站创建一个侧边栏,允许用户从下拉菜单中选择一个项目并显示RSS Feed。 Feed将根据从列表中选择的项目而更改。我不知道如何完成这个,但我的第一个想法是使用z-index和显示/隐藏图层。我有一个图层和菜单设置,但它不允许我更改选择不同菜单项时显示的提要。有谁知道我怎么能做到这一点?
我现在预览了到目前为止我已经完成的工作。它位于网站上, CHUD ,
解决方案
您有两种选择:
-
预加载所有rss提要(我假设您的示例页面中的
<ul>
是您的RSS提要的HTML输出?),在文档加载时将它们全部隐藏,然后显示选中它们 -
使用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,因为这是另一个主题)。
其他提示
这使用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>
这不完全相同,但它使用简单的CSS和HTML,不需要Javascript。 一些逆向工程可以走很长的路。
它在荷兰语中,但它很简单:将鼠标移到<a>
部分和图像切换上。
纯CSS + HTML,没有Javascript
不隶属于 StackOverflow