gpt4 book ai didi

jQuery 多个上下滑动div

转载 作者:行者123 更新时间:2023-12-01 04:57:44 25 4
gpt4 key购买 nike

我找到了有关制作以下滑动面板的教程。 http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html我希望在屏幕顶部有多个向下滑动的菜单

我尝试创建一个新的并尝试将其设置为显示:内联,但这不起作用。这些按钮出现在彼此的顶部。我怎样才能让它们并排?理想情况下,我希望幻灯片并排显示,并且能够单独单击每个幻灯片。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Slide Panel</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});


});
</script>

<style type="text/css">
body {
margin: 0 auto;
padding: 0;
width: 200px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
outline: none;
}
#panel {
background: #754c24;
height: 500px;
display: none;
}

#about {
background: #754c24;
height: 500px;
display: none;
}

.slide {
margin: 0px 20%;
padding: 0;
border-top: solid 4px #422410;
background: orange;
}
.btn-slide {
background: url(images/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 100%;
height: 31px;
padding: 10px 10px 0 0;

display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}



</style>
</head>

<body>

<div id="panel">
hi
</div>

<p class="slide"><a href="#" class="btn-slide">Button 1</a></p>

<div id="about">
hi
</div>

<p class="slide"><a href="#" class="btn-slide">Button 2</a></p>

</body>
</html>

最佳答案

只需将 float:left 属性赋予它解决的面板......

如果 # panel 和 #about 负责 slider ,则添加此 css

#panel {
background: #754c24;
height: 500px;
display: none;
float:left;
}

#about {
background: #754c24;
height: 500px;
display: none;
float:left; ----> float attribute
}

应该为按钮赋予相同的属性以使它们并排

关于jQuery 多个上下滑动div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13207802/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com