Question

当我点击导航栏上的li时，我希望显示一个div而不显示其他div。我用jquery。

示例：如果我点击Entreprise，我想显示id为“entreprise”的块并隐藏其他div

jquery的：

 $(function() 
 {
 
	if(document.getElementById("entreprise").click()){
		document.getElementById("entreprise").css("display","table");
		document.getElementById("service").css("display","none");
		document.getElementById("information").css("display","none");
	}

	if(document.getElementById("service").click()){
		document.getElementById("entreprise").css("display","none");
		document.getElementById("service").css("display","table");
		document.getElementById("information").css("display","none");
	}
	
	if(document.getElementById("information").click()){
		document.getElementById("entreprise").css("display","none");
		document.getElementById("service").css("display","none");
		document.getElementById("information").css("display","table");
	}
	
});

<body>
<div class="container" style="margin-top: 5%">
		<div class="row">
			<ul class="nav nav-tabs">
				<li role="presentation"  id="entreprise"><a href="#">Entreprise</a></li>
				<li role="presentation"  id="service"><a href="#">Service</a></li>
				<li role="presentation" id="information"><a href="#">Information</a></li>
				<li role="presentation"><a href="deconnexion.php">Deconnexion</a></li>
			</ul>
		</div>
		<div class="row" id="entreprise" style="display:none">
			<p> hi</p>
		</div>		
		<div class="row" id="service" style="display:none">
			<p> hi 2 </p>
		</div>
		<div class="row" id="information" style="display:none">
			<p> hi 3</p>
		</div>
	</div>
  </body>

Answer 1

对于按钮和div，您不能拥有相同的ID。

实际上，您根本无法拥有相同的ID。这就是为什么他们是id，唯一标识符。

你可以这样做：

 $('#entrepriseButton').on('click',function(){
    $('#entreprise').show();
    $('#service').hide();
    $('#information').hide();
 });

但当然将按钮ID更改为#entrepriseButton

此处的完整示例https://jsfiddle.net/5k9jdo80/

<强>更新

更好的解决方案是为按钮留下ID，将其从隐藏的div中移除，并将自定义属性（在我的情况下为show-hide）添加到隐藏的div中，然后只需使用这样的jQuery：

 $('li').on('click',function(){
    $(".hidden[show-hide="+$(this).attr('id')+"]").show();
    $(".hidden[show-hide!="+$(this).attr('id')+"]").hide();
 });

完整示例https://jsfiddle.net/5k9jdo80/1/

Answer 2

我认为没有正确的jQuery代码，我还注意到你正在使用＆＃34; id＆＃34; HTML代码中的属性相同2倍，ID属性应该是唯一标识符，并且应该只存在一次。所以它应该像这样工作：

$(function() 
 {

    $('.nav li a').on('click', function(e) {
        var _target = $(this).attr('href'); //it will get something like #enterprise
        var $target_div = $(_target); //transform it into a selector

        if ( _target.indexOf('#') > -1 ) { //if the link has # it means it has a div#wharever target to show, so cancel the link opening effect
            e.preventDefault();
        }

        if ( $target_div.length ) { //check if it exists
            $target_div.css({'display': 'table'}); //apply display: table style, or just use $target.show(); to apply display: block

            $target_div.siblings().hide(); //hide it siblings (if #enterpise is the target, #service and #information will get hidden)
        }
    });

});

HTML代码应如下所示：

<div class="row">
    <ul class="nav nav-tabs">
        <li role="presentation"><a href="#enterprise">Entreprise</a></li> <!-- use the id of the target in the href property -->
        <li role="presentation"><a href="#service">Service</a></li>
        <li role="presentation"><a href="#information">Information</a></li>
        <li role="presentation"><a href="deconnexion.php">Deconnexion</a></li>
    </ul>
</div>
<div class="tabs"> <!-- insert the targets inside a div, otherwise the .nav container with class ".row" will be a sibling -->

    <div class="row" id="enterprise" style="display:none">
        <p> hi</p>
    </div>      
    <div class="row" id="service" style="display:none">
        <p> hi 2 </p>
    </div>
    <div class="row" id="information" style="display:none">
        <p> hi 3</p>
    </div>

</div>

你可以在这里看到一个工作小提琴：https://jsfiddle.net/jadielh/cwyub0xo/

点击<li>时我显示无div并显示表格一个div

2 个答案: