需要帮助将这段代码转换为jQuery

Question

这里的任何jQuery专家都可以帮助我将follwing javascript代码转换为jQuery吗？虽然它的作品，我宁愿看怎么样了它的使用jQuery做

function loadit(element) 
{ 
    document.getElementById('container').src = element.rel; 
    var tabs = document.getElementById('tabs').getElementsByTagName("a"); 

    for (var i=0; i < tabs.length; i++) 
    { 
     if(tabs[i].rel == element.rel) 
     { 
      tabs[i].className = "selected"; 
     } 
     else 
     { 
      tabs[i].className = ""; 
     } 
    } 
} 

下面是HTML

<div id="tabs"> 
       <ul> 
       <li><a href="#" rel="/root/a" onClick="loadit(this)" class="selected">A</a></li> 
       <li><a href="#" rel="/root/b" onClick="loadit(this)">B</a></li> 
       <li><a href="#" rel="/root/c" onClick="loadit(this)">C</li> 
       </ul> 
     </div> 
<iframe id="container" name="container"></iframe> 

，这里是我如何填充在windowload容器：

function startit() 
{ 
    var tabs = document.getElementById('tabs').getElementsByTagName("a"); 
    document.getElementById('container').src = tabs[0].rel; 
} 

window.onload=startit; 

Answer 1

假设（element）传递的参数本身是一个jQuery对象，它可以这个样子。

注意，如果ii'm处理一个jQuery对象，我倾向于$前缀的变量来区分它

function loadit($element) 
{ 
    var rel = $element.prop('rel'); 
    $('#container').prop('src',rel); 
    $('#tabs a').each(function(){ 
     var $a = $(this); 
     $a.toggleClass('selected',$a.prop('rel') == rel); 
    }); 
} 

编辑：我注意到一个错字在我上面的代码。我是从线

$('#tabs a').each(function(){ 

这里缺少#是代替你的HTML的一个非常简化的活生生的例子：http://jsfiddle.net/FKf9L/1/

伊夫假设你点击a的之一，当调用loadit这形成标签。如果这种情况有点多余，您应该锁定jQuery中的a的点击事件。使得代码：

$('#tabs a').click(function(){ 
    var $this = $(this); 
    var rel = $this.attr('rel'); 
    $('#container').prop('src',rel); 
    $this.siblings().removeClass('selected'); 
    $this.addClass('selected'); 
}); 

请参见本活生生的例子：http://jsfiddle.net/p99Q2/

EDIT2：你可能也与startit方法做掉，只是发出的选项卡中的第一a一个click：

​​

活生生的例子：http://jsfiddle.net/p99Q2/2/

Answer 2

这是非常基本的。在15分钟内阅读jQuery教程应该教会你足够在另外15分钟内完成这个任务。

Answer 3

这么多的方法来做到这一点。这是使用更多的jQuery结构。

function loadit(element) 
{ 
    $('#container')[0].src = element.rel; 
    $('#tabs a').each(function(idx){ 
     var tab = $(this); 
     tab.attr('class',''); 
     if(tab.rel == element.rel) 
     { 
     tab.attr('class','selected'); 
     } 
    } 
} 

Answer 4

function loadit(element) { 

    var rel = element.rel; 

    $("#container").attr("src") = rel; 
    var $tabs = $("#tabs a"); 

    $tabs.each(function() { 
     var $tab = $(this); 

     $tab.removeClass("selected"); 

     if ($tab.attr("rel") == rel) { 
     $tab.addClass("selected"); 
     } 
    }); 
}