Question

我正在深入研究使用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>

干杯！

Answer 1

我通常遵循这样的模式：

<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();
    })
});

Answer 2

检查可见性是实现此目的的最简单方法。

jQuery内容滑块

2 个答案: