添加DIV时点击锚点，并删除DIV时单击任一外部或在不同的锚点

我有两个锚点标签，当点击时都显示两个不同的div，但我只想一次显示一个div。我还想隐藏在外部点击时显示的div。我差不多完成了，但是当我点击第一个锚，然后在第二个div上显示（我一次只需要一个）。添加DIV时点击锚点，并删除DIV时单击任一外部或在不同的锚点

这里是我的代码：

//Display and hide div number 1 
 

 
$("a.number_1").on("click", function(event) { 
 
    event.preventDefault(); 
 
    $(".display_div_1").toggle(); 
 
    event.stopPropagation(); 
 
}); 
 

 
$(".display_div_1").on("click", function(event) { 
 
    event.preventDefault(); 
 
    event.stopPropagation(); 
 
}); 
 

 
$(".body").on("click", function(event) { 
 
    event.preventDefault(); 
 
    $(".display_div_1").hide(); 
 
}); 
 

 
//Display and hide div number 2 
 

 
$("a.number_2").on("click", function(event) { 
 
    event.preventDefault(); 
 
    $(".display_div_2").toggle(); 
 
    event.stopPropagation(); 
 
}); 
 

 
$(".display_div_2").on("click", function(event) { 
 
    event.preventDefault(); 
 
    event.stopPropagation(); 
 
}); 
 

 
$(".body").on("click", function(event) { 
 
    event.preventDefault(); 
 
    $(".display_div_2").hide(); 
 
});

div.body { 
 
    background-color: white; 
 
    width: 100%; 
 
    height: 400px; 
 
    border: 1px solid grey; 
 
} 
 

 
div.display_div_1 { 
 
    display: none; 
 
} 
 

 
div.display_div_2 { 
 
    display: none; 
 
} 
 

 
ul { 
 
    margin: 0 0 30px 0; 
 
    padding: 0px; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
} 
 

 
a.display { 
 
    display: inline-block; 
 
    background-color: lightblue; 
 
    padding: 10px 20px; 
 
    text-decoration: none; 
 
} 
 

 
div.display { 
 
    background-color: grey; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="body"> 
 
    <ul> 
 
    <li> 
 
     <a href="" method="POST" class="display number_1">Display div 1</a> 
 
    </li> 
 
    <li> 
 
     <a href="" method="POST" class="display number_2">Display div 2</a> 
 
    </li> 
 
    </ul> 
 
    <div id="first" class="display display_div_1"> 
 
    This is div 1! 
 
    </div> 
 
    <div id="second" class="display display_div_2"> 
 
    This is div 2! 
 
    </div> 
 

 

 
</div>

我jQuery代码是从第一个答案取自后：https://stackoverflow.com/questions/30...

谢谢！

来源

2017-04-14 Night83

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<body> 
<H1>Blah</H1> 
<div class="body"> 
    <ul> 
    <li> 
     <a href="#" method="POST" id='div1' class="number">Display div 1</a> 
    </li> 
    <li> 
     <a href="#" method="POST" id='div2' class="number">Display div 2</a> 
    </li> 
    </ul> 
    <div id="1" class="display display_div_1"> 
    This is div 1! 
    </div> 
    <div id="2" class="display display_div_2"> 
    This is div 2! 
    </div> 

</div> 
</body>

随着脚本

$(document).ready(function() { 
    $('.number').click(function() { 
     $('div').hide(); //you can set a class on your divs and use that if you don't want to hide all divs 
     $('.body').show(); 
     $('.number').show(); 
     $('#' + this.id.substring(3)).show(); //show just the div you want to show 
    }); 
});

来源

2017-04-14 13:22:10 ControlAltDel

我很抱歉，但我还是不设法得到它工作。我删除了我的jquery代码并添加了你的代码，同时也删除了我的html代码并添加了你的代码，但现在当点击锚时div甚至不会出现。你能不能告诉我一个jsfiddle？这里是当我添加你的代码时发生了什么[https://jsfiddle.net/5r8q3e95/](https://jsfiddle.net/5r8q3e95/） – Night83

@ Night83我已经更新了我的答案 – ControlAltDel

谢谢！几乎完美。现在它一次只显示一个div，但是当我在div之外按div时，div不会隐藏。这里是包含你修改的jsfiddle文件[jsfiddle.net/3svmwmz8/](https://jsfiddle.net/3svmwmz8/） – Night83

发现在这个职位的答案：Use jQuery to hide a DIV when the user clicks outside of it

\t $('a#div1').click(function() { 
 
    \t $("div#1").show(); 
 
    }); 
 
    $('a#div2').click(function() { 
 
    \t $("div#2").show(); 
 
    }); 
 
    $('a#div3').click(function() { 
 
    \t $("div#3").show(); 
 
    }); 
 

 
$(document).mouseup(function (e) 
 
{ 
 
    var container = new Array(); 
 
    container.push($('.display_div_1')); 
 
    container.push($('.display_div_2')); 
 
    container.push($('.display_div_3')); 
 
    
 
    $.each(container, function(key, value) { 
 
     if (!$(value).is(e.target) // if the target of the click isn't the container... 
 
      && $(value).has(e.target).length === 0) // ... nor a descendant of the container 
 
     { 
 
      $(value).hide(); 
 
     } 
 
    }); 
 
});

div.body { 
 
    background-color: white; 
 
    width: 100%; 
 
    height: 400px; 
 
    border: 1px solid grey; 
 
} 
 

 
div.display_div_1 { 
 
    display: none; 
 
} 
 

 
div.display_div_2 { 
 
    display: none; 
 
} 
 

 
div.display_div_3 { 
 
    display: none; 
 
} 
 

 
ul { 
 
    margin: 0 0 30px 0; 
 
    padding: 0px; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
} 
 

 
a.display { 
 
    display: inline-block; 
 
    background-color: lightblue; 
 
    padding: 10px 20px; 
 
    text-decoration: none; 
 
} 
 

 
div.display { 
 
    background-color: grey; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<H1>Blah</H1> 
 
<div class="body"> 
 
    <ul> 
 
    <li> 
 
     <a href="#" method="POST" id='div1' class="number">Display div 1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" method="POST" id='div2' class="number">Display div 2</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" method="POST" id='div3' class="number">Display div 3</a> 
 
    </li> 
 
    </ul> 
 
    <div id="1" class="display display_div_1"> 
 
    This is div 1! 
 
    </div> 
 
    <div id="2" class="display display_div_2"> 
 
    This is div 2! 
 
    </div> 
 
    <div id="3" class="display display_div_3"> 
 
    This is div 3! 
 
    </div> 
 

 
</div> 
 
</body>

来源

2017-04-20 08:39:42 Night83

添加DIV时点击锚点，并删除DIV时单击任一外部或在不同的锚点

回答

相关问题