jQuery內容滑塊

我只是鑽研使用jQuery，並且我想通過使用良好的編碼邏輯開始。我正在開發一個上傳網站，用戶可以選擇「從電腦上傳」或「從網址上傳」。我在內容上方有兩個鏈接，用戶可以選擇從他們的計算機或網址上傳內容，並且當用戶做出選擇時，我希望內容可以通過jQuery（帶有某些效果）進行更改。jQuery內容滑塊

演示的我想要的東西： http://imgkk.com/

在內容框在那裏說：Upload: Images URL NFO，我想我的內容，這樣的滑動。

我知道如何做到這一點，但我不確定它是否正確。當用戶點擊鏈接並採取相應措施時，我將檢查哪些內容可見，這是最佳方式嗎？

謝謝。

編輯：針對某人的回答：

  $(".upload-options a").click(function(e){ 
       var id = $(this).attr('href'), 
        $target = $(id); 
        alert($target); 
      if(!$target.is(':visible')){ 
       // Show $target here since it is not currently visible 
       alert('Show: ' + $target); 
      } 
      });

標記：

  <p class="upload-options"> 
       <a href="#normal-upload" class="normal">Normal upload</a> 
       <a href="#url-upload" class="url">URL upload</a> 
      </p> 
      <div id="normal-upload"> 
       // normal upload stuff 
      </div> 
      <div id="url-upload"> 
       // url upload stuff 
      </div>

乾杯！

來源

2010-01-10 Matt

我通常遵循這樣一個規律：

<div id="links"> 
    <a href="#computer">Computer</a> 
    <a href="#url">URL</a> 
</div> 
<div id="panes"> 
    <div id="computer"> 

    </div> 
    <div id="url"> 

    </div> 
</div>

然後jQuery的：

$(function(){ 
    $("#links a").click(function(e){ 
     var id = $(this).attr('href'), 
      $target = $(id); 

     if(!$target.is(':visible')){ 
     // Show $target here since it is not currently visible 
     } 
     e.preventDefault(); 
    }) 
});

來源

2010-01-10 03:56:15

+1 |快速，乾淨，一如既往！ – Sampson 2010-01-10 03:59:16

嘿，謝謝你的代碼。它主要工作，但如果我alert（）'我得到的輸出：'[object Object]'。我檢查了$ target作爲'[object Object]'返回。可能是我做過的事情，將在我原來的帖子中發佈標記:) – Matt 2010-01-10 04:22:17

是的，它的實際工作。警告框不能渲染DOM元素，因此它向您顯示*它是什麼，它是一個對象。試試這個：'alert（$ target [0] .id）'，你將得到正確的ID。您需要提供您自己的動畫和顯示/隱藏代碼，並在代碼中註釋。 – 2010-01-10 04:38:54

檢查可見性是完成此操作的最簡單方法。

來源

2010-01-10 03:55:42 Ariel

jQuery內容滑塊

回答

相關問題