изменение ДИВ на строке таблицы щелкните событие

Question

пытаюсь создать таблицу, в которой по нажатию каждой строке следует изменить содержимое на стороне сНу к нему так же, как вкладки Jquery ...

код я использовал для этого

HTML

<table> 
    <tr id="oone"> 
     <td>1</td><td>1</td><td>1</td> 
    </tr> 
    <tr id="ttwo"> 
     <td>2</td><td>2</td><td>2</td> 
    </tr> 
    <tr id="tthree"> 
     <td>3</td><td>3</td><td>3</td> 
    </tr> 
</table> 

<div class="sample"> 
    <div id="one"> 
     one 
    </div> 
    <div id="two"> 
    two   
    </div> 
    <div id="three"> 
    three  
    </div> 
</div> 

CSS

table{ 
    float:left; 
} 
table tr td{ 
    border:1px solid #000; 
    padding:10px; 
} 
.sample{ 
    width:300px; 
    height:145px; 
    background-color:#999; 
    float:left; 
} 

#one{ 
    display: none; 
} 
.current{ 
    display:block; 
} 

#two{ 
    display: none; 
} 
#three{ 
    display: none; 
} 

JQuery 1.7.2 на нагрузке

$(function(){ 

$("table tr").click(function(){ 

    event.preventDefault(); 
     $(this).parent().addClass("current"); 
     $(this).parent().siblings().removeClass("current"); 
     var tab = $(this).attr("href"); 
     $(".tab-content").not(tab).css("display", "none"); 
     $(tab).fadeIn(); 
}); 
}); 

здесь jsfiddle

вещь, если я ставлю на первое т.р. теге его меняющегося в DIV, то после второго тр он должен показать второй DIV его не работает ....

спасибо за ваше время ...

Answer 1

См скрипку: http://jsfiddle.net/3518Ldgk/

HTML:

<table> 
    <tr data-tab="one"> 
     <td>1</td><td>1</td><td>1</td> 
    </tr> 
    <tr data-tab="two"> 
     <td>2</td><td>2</td><td>2</td> 
    </tr> 
    <tr data-tab="three"> 
     <td>3</td><td>3</td><td>3</td> 
    </tr> 
</table> 

<div class="sample"> 
    <div class="tab-content" id="one"> 
     one 
    </div> 
    <div class="tab-content" id="two"> 
    two   
    </div> 
    <div class="tab-content" id="three"> 
    three  
    </div> 
</div> 

CSS:

table{ 
    float:left; 
} 
table tr td{ 
    border:1px solid #000; 
    padding:10px; 
} 
.sample{ 
    width:300px; 
    height:145px; 
    float:left; 
} 

.current{ 
    background-color: yellow; 
} 

#one{ 
    display: none; 
    background-color: blue; 
} 

#two{ 
    display: none; 
    background-color: green; 
} 
#three{ 
    display: none; 
    background-color: red; 
} 

JS:

$(function(){ 

$("table td").click(function(){ 

    event.preventDefault(); 
     $('table td').removeClass('current'); 
     $(this).addClass("current"); 
     var tab = $(this).parent().attr("data-tab"); 
     $('.tab-content').hide(); 
     $('#' + tab).fadeIn(); 
    }); 
}); 

Answer 2

Хорошо, так что, если я правильно понимаю, вот как вы можете сделать это, изменив код немного:

Во-первых, сделать HREF атрибуты вам пытались найти:

<table> 
    <tr href='one'><td>1</td><td>1</td><td>1</td></tr> 
    <tr href='two'><td>2</td><td>2</td><td>2</td></tr> 
    <tr href='three'><td>3</td><td>3</td><td>3</td></td> 
</table> 

<div class="sample"> 
    <div id="one">one</div> 
    <div id="two">two</div> 
    <div id="three">three</div> 
</div> 

Затем вы можете сделать что-то вроде этого:

$("table tr").click(function(){ 
    $($('#' + $(this).attr("href"))).siblings().hide().end().fadeIn(); 
}); 

Который находит DIV с идентификатором, который соответствует вашей HREF атрибута, скрывает ее братьев и сестер, а затем затухает его в как просили. Вот скрипка: http://jsfiddle.net/nh6kL12o/.

Answer 3

Здесь вы скрипку. Я думаю, что это упрощает его еще больше:

http://jsfiddle.net/n3ng3g4q/3/

HTML

<table> 
    <tr id="oone" data-value="one"> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
    </tr> 
    <tr id="ttwo" data-value="two"> 
     <td>2</td> 
     <td>2</td> 
     <td>2</td> 
    </tr> 
    <tr id="tthree" data-value="three"> 
     <td>3</td> 
     <td>3</td> 
     <td>3</td> 
    </tr> 
</table> 
<div class="sample"> 
    <div id="one">one</div> 
    <div id="two">two</div> 
    <div id="three">three</div> 
</div> 

JS

$(function() { 

    $("tr").click(function() { 
     $(".sample div").css({ 
      "display": "none" 
     }) 
     var val = $(this).data("value"); 
     $("#" + val).css({ 
      "display": "block" 
     }); 
    }); 
});