Question

如何在点击其中一个列表项

时隐藏其他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>

我需要在学生列表项目上单击校友列表项目ans tab2时显示tab1内容。怎么做？请帮忙

Answer 1

试试这个：

$(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>

JSFIDDLE DEMO-jQuery

JSFIDDLE DEMO-JavaScript

Answer 2

您好，您可以使用以下JS

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

也可以查看Demo

Answer 3

试试这个

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

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

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

DEMO

Answer 4

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

单击列表项显示特定div

4 个答案:

DEMO