표시/숨기기 레이어 및 z-index를 사용하여 페이지 컨텐츠를 변경하는 드롭 다운 메뉴 작성

Question

사용자가 드롭 다운 메뉴에서 항목을 선택하고 RSS 피드를 표시 할 수있는 사이트의 사이드 바를 만들려고합니다. 목록에서 어떤 품목이 선택되는지에 따라 피드가 변경됩니다. 나는 이것을 어떻게 압도하는지 잘 모르겠지만, 나의 첫 번째 생각은 z-index를 사용하고 레이어를 보여주는 것이었다. 하나의 레이어와 메뉴가 설정되어 있지만 다른 메뉴 항목을 선택할 때 표시된 피드를 변경할 수 없습니다. 내가 이것을 어떻게 압도 할 수 있는지 아는 사람이 있습니까?

나는 지금까지 내가 한 일에 대한 라이브 미리보기를 가지고 있습니다. 사이트에 위치하고 있으며 chud,

Answer 1

두 가지 옵션이 있습니다.

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>

자바 스크립트 :

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 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 없음