Question

有没有办法点击类“title1”并打开“text1”...点击“title2”并打开“text2”......依此类推而不使用类选择器？

<nav>
    <div class="title1"> title1 </div>
    <div class="title2"> title2 </div>
</nav>

<div class="text">
    <div class="text1"> text 1 </div>
    <div class="text2"> text 2 </div>
</div>

<script>
$('nav .cada:nth-child(1)').click(function(){
    $('.txt .cada').fadeOut()
    $('.txt .cada:nth-child(1)').fadeIn()
})
$('nav .cada:nth-child(2)').click(function(){
    $('.txt .cada').fadeOut()
    $('.txt .cada:nth-child(2)').fadeIn()
})
</script>

Answer 1

等，不使用类选择器？

试试这个，

$("nav div").click(function(){ 
var xTest = $(this).parent().next().find('div');
xTest.fadeOut();
xTest.eq($(this).index()).fadeIn();
});

DEMO

Answer 2

nth-选择器不会尊重这些类，所以即使你写了

nav .txt:nth-child(3) {
   /* this won't select 3rd element nested inside nav having class .txt */
}

所以你尝试的是不可能的，虽然使用CSS only选择器，不知道jQuery是否有相似的

Answer 3

$("nav div").on("click", function(){
    var index = $(this).index();
    $("div.text").children("div").eq(index).show().siblings().hide();
});

FIDDLE：http://jsfiddle.net/VnHG4/

Answer 4

保持简单：

$('nav div').click(function(){
    $('.text div').hide().eq($(this).index()).show();
});

JS Fiddle demo

虽然我不确定你是否要避免使用所有类选择器，但这不是（click()处理程序中的内链使用一个）。但是，如果必须避免所有类：

$('nav div').click(function(){
    $(this).parent().next().children().hide().eq($(this).index()).show();
});

JS Fiddle demo

参考文献：

Answer 5

我找到了简单的答案：

<script>
$('nav .cada').click(function(){
    var position = $(this).index() 
    $('.txt .cada').fadeOut()
    $('.txt .cada:nth-child('+position+')').fadeIn()
})
</script>

使用nth-child打开div - Jquery

5 个答案:

DEMO