单击atag时显示特定div。并隐藏其他div

问题描述：

我对jquery和编码一般都不熟悉。我遇到了一些麻烦。单击atag时显示特定div。并隐藏其他div

我想要的是当页面加载时，'Vlogging'链接处于活动状态，并显示'Details 1'。然后，当你点击'电影制作'或'贝美'...'时，会显示详细信息2或3，以及有哪些人在那里消失。

到目前为止，我已经设置好了所有东西，只需要点击其他链接中的其中一个正确的“详细信息”文本就可以显示出来。

非常感谢你，我现在有一把小提琴！

下面是代码比需要调整：

$(function() { 
    $("togglediv1").click(function() { 
     $("#togglediv1").removeClass("display-start"); 
     $("li").removeClass("display"); 
     $(this).addClass("display"); 
    }); 
});

有很多插件用于在页面中实现选项卡。 – Barmar

非常感谢你！我想我没有声望让你高兴，但是谢谢你。您的每个答复似乎都能完成这项工作，并且帮助我更好地理解了这一点。再次感谢你！ –

您不必积极参与，只需将其中一个标记为所选答案即可。 – sleeyuen

答

此代码将为您节省大量的时间。我添加了一个名为“数据”的自定义属性。该属性用于将链接与您希望显示的选项卡绑定。此代码将使添加更多标签等变得更加容易。查看更改后的HTML和JavaScript的底部。

<div id="wrap"> 

<ul id="divtoggle"> 
    <li><a class="link" data="1">Vlogging</a></li> 
    <li><a class="link" data="2"> Filmmaking</a></li> 
    <li><a class="link" data="3"> Beme</a></li> 
</ul> 


<div class="text"> 
    <div class="tab" data="1">Details 1</div> 
    <div class="tab" data="2">Details 2</div> 
    <div class="tab" data="3">Details 3</div> 
</div> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
$(function() { 
    $(".link").click(function() { 
    $(".active").removeClass("active"); 
    $(this).addClass("active"); 
    dataAttr = $(this).attr("data"); 
    $(".tab").hide(); 
    $(".tab[data="+dataAttr+"]").show(); 
    }); 
    $(".link:first").click(); 
}); 
</script>

答

$(function() { 
    $("#togglediv1").click(function() { 
     $("#one").removeClass("display"); 
     $("#one").addClass("display-start"); 
     $("#two").removeClass("display-start"); 
     $("#two").addClass("display"); 
     $("#three").removeClass("display-start"); 
     $("#three").addClass("display"); 
    }); 
}); 

$(function() { 
    $("#togglediv2").click(function() { 
     $("#one").removeClass("display-start"); 
     $("#one").addClass("display"); 
     $("#two").removeClass("display"); 
     $("#two").addClass("display-start"); 
     $("#three").addClass("display"); 
     $("#three").removeClass("display-start"); 
    }); 
});

...

答

更新的jsfiddle：http://jsfiddle.net/t1huc43d/3/

由于您的ID是不是在跟踪点击什么有利的，哪些不是，我决定只使用this找到你点击的细节。

你更新的javascript：

$(function() { 
    $("li").click(function() { 
     $("#togglediv1").removeClass("active-start"); 
     $("li").removeClass("active"); 
     $(this).addClass("active"); 
     let temp = $("#divtoggle").children(); 
      var index; 

     for (let i = 0; i < temp.length; i++) 
     { 
     if (this == temp[i]) 
     { 
      index = i; 
      break; 
     } 
     } 

     $(".display-start").addClass("display"); 
     $(".display-start").removeClass("display-start"); 

      let text_children = $(".text").children() 
     let the_child = text_children[index]; 
      $(text_children[index]).addClass("display-start"); 
     $(text_children[index]).removeClass("display"); 
    }); 
});

答

JQuery的实际上有一些组件来帮助你，但对我来说，这样做的最短和最彻底的方法是：

我的第一件事情d请设置每个标题的id，由1递增来之后，我会做同样的，像这样的细节：

<div id="wrap"> 
    <ul id="divtoggle"> 
     <li><a class="title" id="title-1">Vlogging</a></li> 
     <li><a class="title" id="title-2"> Filmmaking</a></li> 
     <li><a class="title" id="title-3"> Beme</a></li> 
    </ul> 

    <div class="text"> 
     <div class='display' id="detail-1">Details 1</div> 
     <div class='display' id="detail-2">Details 2</div> 
     <div class='display' id="detail-3">Details 3</div> 
    </div> 
</div>

之后，JQue ry非常简单。在类title上设置点击事件。首先要做的是解析点击标题的id。一旦你的，针对相关细节，并显示：

$(document).ready(function() { 

    $(".title").click(function() { 

    //*** get id 
    var id = $(this).attr("id").split("-")[1]; 
    if (typeof id != "undefined"){ 

     //*** hide other descriptions and show yours 
     $(".display").hide(); 
     $("#detail-" + id).show(); 
    } 

    }); 

});

DEMO：http://jsbin.com/volikofihe/edit?html,js,console,output

答

在这里你去。稍微简化你的CSS。切换顶部链接上的.active类，以及文本div上的.display类。当你点击链接时，代码使用列表中链接的$.index()作为要显示的文本div的索引。所以如果你点击第二个链接，它会显示第二个文本框。

$(function() { 
 
    $toggleLinks = $('#divtoggle a'), 
 
    $displays = $('.text div'); 
 
    
 
    $toggleLinks.on('click', function(e) { 
 
    e.preventDefault(); 
 
    $toggleLinks.removeClass('active'); 
 
    $(this).addClass('active'); 
 
    $displays.removeClass('display'); 
 
    $displays.eq($(this).closest('li').index()).addClass('display'); 
 
    }); 
 
});

li { 
 
    color: grey; 
 
    font: effra; 
 
    font-weight: bold; 
 
} 
 

 
a:hover { 
 
    color: #aaaaaa; 
 
    cursor: pointer; 
 
} 
 

 
.active { 
 
    color: orange; 
 
} 
 

 
.text div { 
 
    display: none; 
 
} 
 

 
.text .display { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrap"> 
 

 
    <ul id="divtoggle"> 
 
    <li><a class="active">Vlogging</a></li> 
 
    <li><a>Filmmaking</a></li> 
 
    <li><a>Beme</a></li> 
 
    </ul> 
 

 
    <div class="text"> 
 
    <div class='display'>Details 1</div> 
 
    <div>Details 2</div> 
 
    <div>Details 3</div> 
 
    </div> 
 

 
</div>

答

腌制尽可能多的现有代码尽可能的。 Updated fiddle.

我添加一个数据控件自定义属性到每个li元素，以便其关联到对应的各数据的div：

<li data-controls="one"><a id="togglediv1" class="active-start">Vlogging</a></li> 
<li data-controls="two"><a id="togglediv2"> Filmmaking</a></li> 
<li data-controls="three"><a id="togglediv3"> Beme</a></li>

然后我更新了JavaScript来删除和添加类，如所须。

单击atag时显示特定div。并隐藏其他div

相关推荐