添加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時單擊任一外部或在不同的錨點

回答

相關問題