Javascript 单击列表项时显示特定div

如何在单击其中一个列表项时隐藏其他div

<div id="tab-holder">
<ul id="tabs">
   <li style="margin-top:4px;"><a href="#tab1" class="tab1">Alumni</a></li>
   <li style="margin-top:4px;"><a href="#tab2" class="tab2">Student</a></li>
 </ul>

 <!--TAB1 CONTAINER--> 
 <div id="tab1" class="newscontainer tab1">
      TAB1 CLCIKED  
 </div> 
 <!--TAB1 ENDS-->

 <!--TAB2 CONTAINER--> 
 <div id="tab2" class="newscontainer tab2">
      TAB2 CLCIKED  
 </div> 
 <!--TAB2 ENDS-->
 </div>

表1已关闭
表2已关闭

我只需要在点击校友列表项和学生列表项上的tab2时显示tab1内容。

---

如何做？请帮助

您好，您可以使用下面的JS

$('#tabs > li > a').click(function () {
        $('.newscontainer').hide();
        var $this = $(this);
        var target = $this.attr('href');
        $(target).show();
    });

也可以检查试试这个

var catchDom = $("#tabs").children();
catchDom.hide();

$("#tab1").click(function () {

    catchDom.hide().eq(0).show();
});
$("#tab2").click(function () {
    catchDom.hide().eq(1).show();
});

试试这个：

$(function(){
    $("#tabs li a").click(function(){
        $(".newscontainer").hide();
        var myDiv = $(this).attr("href");
        $(myDiv).show();
    });
});  

使用JavaScript:

将

onclick

事件添加到锚定标记，如下所示：

<a href="#tab1" class="tabLink tab1" onclick="testFunc(this)">Alumni</a>

<script>
    function testFunc(item) {
        var divs = document.getElementsByClassName("newscontainer");
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.display = 'none';
        }
        var myDiv = item.href;
        var target = myDiv.split("#");
        document.getElementById(target[1]).style.display = "block";
    }
</script>

函数testFunc（项）{
var divs=document.getElementsByClassName（“新闻容器”）；
对于（变量i=0；i

---

到目前为止您尝试了什么？您考虑过了吗？请检查给出的答案我认为这会对您有所帮助。我可以使用javascript而不是jquery来完成吗？是的，让我来完成代码事实上我不擅长javascript，我需要一些时间来完成research@YogeshSharma已经完成了代码，您可以查看我的答案。：）我可以使用javascript而不是jquery？是的，但是jquery是这个要求的更好的选择。由于一些依赖性问题，我不得不使用javascript…（嘿，请根据您的要求检查我的更新答案。

 $("#tabs li a").on("click",function(){
    var className = $(this).prop("class"); 
    $(".newscontainer").hide();
    $("#"+className).show();
 });