我有4个div:s,一次只在html body的指定位置显示一个div的内容,如何使用css根据点击的url在同一个地方显示所有4个div的内容。
如果单击 url #1,它应该显示 div #1 中的内容,依此类推 - 对于 4 个 div,但一次只能在页面中间显示一个 div。
CSS
.viewerpane {
margin-top: 10px;
margin-left: 100px;
width: 1200px;
height: 560px;
}
HTML
<div class="row">
<div class="viewerpane" id="Swipe Access_viewerpane" style="position:relative"></div>
<div class="viewerpane" id="After Office Hours_viewerpane" style="position:relative"></div>
<div class="viewerpane" id="Weekend Access_viewerpane" style="position:relative"></div>
<div class="viewerpane" id="All Users Data_viewerpane" style="position:relative"></div>
</div>
最佳答案
使用onclick
到a
并在函数.hide()
中使用或 .show()
通过他的id
选择器(没有空格)
function func(id){
$('.viewerpane').hide();
$('#'+id).show();
}
.viewerpane {
margin-top: 10px;
margin-left: 100px;
width: 1200px;
height: 560px;
}
a{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onclick="func('Swipe_Access_viewerpane')">Swipe_Access_viewerpane</a>
<a href="#" onclick="func('After_Office_Hours_viewerpane')">After_Office Hours_viewerpane</a>
<a href="#" onclick="func('Weekend_Access_viewerpane')">Weekend_Access_viewerpane</a>
<a href="#" onclick="func('All_Users_Data_viewerpane')">All_Users_Data_viewerpane</a>
<div class="row">
<div class="viewerpane" id="Swipe_Access_viewerpane" style="position:relative">Swipe_Access_viewerpane</div>
<div class="viewerpane" id="After_Office_Hours_viewerpane" style="position:relative">After_Office Hours_viewerpane</div>
<div class="viewerpane" id="Weekend_Access_viewerpane" style="position:relative">Weekend_Access_viewerpane</div>
<div class="viewerpane" id="All_Users_Data_viewerpane" style="position:relative">All_Users_Data_viewerpane</div>
</div>
关于javascript - 如何使用CSS显示所有4个div :s content in a same place of HTML body,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51941676/