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内容滑块

回答

相关问题