Javascript 将浮点元素设置为在同一级别_Javascript_Jquery_Html_Css

Javascript 将浮点元素设置为在同一级别

javascript jquery html css

Javascript 将浮点元素设置为在同一级别,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在为我的实习写概念设计时遇到了麻烦，我想要的是一个有六个可点击元素（即图片）的页面。单击一个按钮后，其他按钮消失，活动按钮移到顶部。我通过使用左定位和jquery实现了这一切。但是，如果使用左定位，元素将以不同的屏幕分辨率移动。所以我决定用浮动来代替，这样位置就会保持不变。我需要元素tht是左浮动的，以与右对齐的浮动垂直对齐。下面是它当前外观的屏幕截图。这就是我想要的样子这是我目前的代码 <html> <head> <title> Div Blocks&l

我在为我的实习写概念设计时遇到了麻烦，我想要的是一个有六个可点击元素（即图片）的页面。单击一个按钮后，其他按钮消失，活动按钮移到顶部。我通过使用左定位和jquery实现了这一切。但是，如果使用左定位，元素将以不同的屏幕分辨率移动。所以我决定用浮动来代替，这样位置就会保持不变。我需要元素tht是左浮动的，以与右对齐的浮动垂直对齐。下面是它当前外观的屏幕截图。这就是我想要的样子

这是我目前的代码

<html>
<head>
<title> Div Blocks</title>

<style type="text/css">
body {
        background: url(bgp.jpg) no-repeat fixed center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    height:100%;
    width:100%;

}
div.sep {

clear: both;

}


div.full
{
left:50%;
height:auto;
width:auto;

}

    a{
    cursor : url("nav.png"), pointer;
    }

  div.one a
{

top:50px;
float:left;
width: 400px;
height: 100px;
text-decoration:none;
background:url("branding.png");
background-repeat:no-repeat;
padding-bottom:35px;
}
div.one a:hover
{background: url("brandingalt.png");

 background-repeat:no-repeat;
}
div.one a:active
{background: url("brandingalt.png");

 background-repeat:no-repeat;
}

div.two a
{

top:264px;
float:left;
width: 400px;
height: 100px;
text-decoration:none;
background:url("marketing.png");
background-repeat:no-repeat;
padding-bottom:35px;
}
div.two a:hover
 {background: url("marketingalt.png");

 background-repeat:no-repeat;

}
div.three a
{

top:457px;
float:left;
width: 500px;
height: 100px;
text-decoration:none;
background:url("ecommerce.png");
background-repeat:no-repeat;
padding-bottom:20px;
}
div.three a:hover
 {background: url("ecommercealt.png");

background-repeat:no-repeat;
}

div.r1 a
{

top:50px;
float:right;
width: 400px;
height: 100px;
text-decoration:none;
background:url("webdesign.png");
background-repeat:no-repeat;
padding-bottom:25px;
}
div.r1 a:hover
 {background: url("webdesignalt.png");

background-repeat:no-repeat;
}

div.r2 a
{

top:254px;
float:right;
width: 450px;
height: 150px;
text-decoration:none;
background:url("optimization.png");
background-repeat:no-repeat;
padding-bottom:20px;
}
div.r2 a:hover
 {background: url("optimizationalt.png");
background-repeat:no-repeat;
}
div.r3 a
{

top:457px;
float:right;
width: 400px;
height: 75px;
text-decoration:none;
padding-bottom: 20px;
background:url(packaging.png);
background-repeat:no-repeat;
}
div.r3 a:hover
 {background: url("packagingalt.png");
background-repeat: no-repeat;
}

</style>
</head>
<body>




    <div class="one">
<a href="#" value="Branding" class="go" ></a>
    </div><div class="sep"></div>
  <div class="r1">
<a href="#"class="go" ></a>
    </div><div class="sep"></div>

    <div class="two">
<a href="#" class="go"></a>
    </div><div class="sep"></div>

      <div class="r2">
<a href="#"class="go" ></a>
    </div><div class="sep"></div>


    <div class="three">
<a href="#"class="go" ></a>
    </div><div class="sep"></div>

<div class="r3">
<a href="#"class="go" ></a>
    </div><div class="sep"></div>





    </body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>


$("a").click(function(event){
    event.preventDefault(); // prevent the link from changing the location
    $(this)
        .closest("div") // select the parent div of the link

        .siblings() // select all the siblings of the div
        .hide("slow") // hide them
setTimeout(function() {

$(".go").animate({top: "0"}, "slow");},1500);

});


分区块
身体{
背景：url（bgp.jpg）无重复固定中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
身高：100%；
宽度：100%；
}
九月分区{
明确：两者皆有；
}
舱满
{
左：50%；
高度：自动；
宽度：自动；
}
a{
游标：url（“nav.png”），指针；
}
第一分区a
{
顶部：50px；
浮动：左；
宽度：400px；
高度：100px；
文字装饰：无；
背景：url（“branding.png”）；
背景重复：无重复；
垫底：35px；
}
第一组a：悬停
{背景：url（“brandingalt.png”）；
背景重复：无重复；
}
第一分区a：现行
{背景：url（“brandingalt.png”）；
背景重复：无重复；
}
第二分区a
{
top:264px；
浮动：左；
宽度：400px；
高度：100px；
文字装饰：无；
背景：url（“marketing.png”）；
背景重复：无重复；
垫底：35px；
}
第二组a：悬停
{背景：url（“marketingalt.png”）；
背景重复：无重复；
}
第三分区a
{
顶部：457px；
浮动：左；
宽度：500px；
高度：100px；
文字装饰：无；
背景：url（“ecommerce.png”）；
背景重复：无重复；
垫底：20px；
}
第三组a：悬停
{背景：url（“ecommercealt.png”）；
背景重复：无重复；
}
分区r1 a
{
顶部：50px；
浮动：对；
宽度：400px；
高度：100px；
文字装饰：无；
背景：url（“webdesign.png”）；
背景重复：无重复；
垫底：25px；
}
r1区a：悬停
{背景：url（“webdesignalt.png”）；
背景重复：无重复；
}
分区r2 a
{
顶部：254px；
浮动：对；
宽度：450px；
高度：150像素；
文字装饰：无；
背景：url（“optimization.png”）；
背景重复：无重复；
垫底：20px；
}
r2 a组：悬停
{背景：url（“optimizationalt.png”）；
背景重复：无重复；
}
r3 a分部
{
顶部：457px；
浮动：对；
宽度：400px；
高度：75px；
文字装饰：无；
垫底：20px；
背景：url（packaging.png）；
背景重复：无重复；
}
第3部分a：悬停
{背景：url（“packagingalt.png”）；
背景重复：无重复；
}
$（“a”）。单击（函数（事件）{
event.preventDefault（）；//防止链接更改位置
$（本）
.closest（“div”）//选择链接的父div
.sides（）//选择div的所有同级
.hide（“slow”）//隐藏它们
setTimeout（函数（）{
$（“.go”）.animate（{top:“0”}，“slow”）；}，1500）；
});

这是我的旧代码

<html>
<head>
<title> Div Blocks</title>

<style type="text/css">
html {
        background: url(bgo.jpg) no-repeat fixed center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;



}

    a{
    cursor : url("nav.png"), pointer;
    }

  div.one a
{
position:absolute;
top:50px;
left:60px;
width: 400px;
height: 100px;
text-decoration:none;
background:url("branding.png");
background-repeat:no-repeat;
padding-bottom:35px;
}
div.one a:hover
{background: url("brandingalt.png");
 background-position: 0px 0px;
 background-repeat:no-repeat;
}
div.one a:active
{background: url("brandingalt.png");
 background-position: 0px 0px;
 background-repeat:no-repeat;
}

div.two a
{
position: absolute;
top:264px;
left:60px;
width: 400px;
height: 100px;
text-decoration:none;
background:url("marketing.png");
background-repeat:no-repeat;
padding-bottom:35px;
}
div.two a:hover
 {background: url("marketingalt.png");
 background-position:0px 0px;
 background-repeat:no-repeat;

}
div.three a
{
position: absolute;
top:457px;
left:56px;
width: 500px;
height: 100px;
text-decoration:none;
background:url("ecommerce.png");
background-repeat:no-repeat;
padding-bottom:20px;
}
div.three a:hover
 {background: url("ecommercealt.png");
background-position: 0 0px;
background-repeat:no-repeat;
}

div.r1 a
{
position: absolute;
top:50px;
left:900px;
width: 400px;
height: 100px;
text-decoration:none;
background:url("webdesign.png");
background-repeat:no-repeat;
padding-bottom:25px;
}
div.r1 a:hover
 {background: url("webdesignalt.png");
background-position: 0px 0px;
background-repeat:no-repeat;
}

div.r2 a
{
position: absolute;
top:254px;
left:900px;
width: 450px;
height: 150px;
text-decoration:none;
background:url("optimization.png");
background-repeat:no-repeat;
padding-bottom:20px;
}
div.r2 a:hover
 {background: url("optimizationalt.png");
background-repeat:no-repeat;
}
div.r3 a
{
position: absolute;
top:457px;
left:900px;
width: 400px;
height: 75px;
text-decoration:none;
padding-bottom: 20px;
background:url(packaging.png);
background-repeat:no-repeat;
}
div.r3 a:hover
 {background: url("packagingalt.png");
background-repeat: no-repeat;
}

</style>
</head>
<body>



    <div class="one">
<a href="#" value="Branding" class="go" ></a>
    </div>

    <div class="two">
<a href="#" class="go"></a>
    </div>
    <div class="three">
<a href="#"class="go" ></a>
    </div>

    <div class="r1">
<a href="#"class="go" ></a>
    </div>
      <div class="r2">
<a href="#"class="go" ></a>
    </div>

            <div class="r3">
<a href="#"class="go" ></a>
    </div>




    </body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>


$("a").click(function(event){
    event.preventDefault(); // prevent the link from changing the location
    $(this)
        .closest("div") // select the parent div of the link

        .siblings() // select all the siblings of the div
        .hide("slow") // hide them
setTimeout(function() {

$(".go").animate({top: "0"}, "slow");},1200);

});



</script>


分区块
html{
背景：url（bgo.jpg）无重复固定中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
a{
游标：url（“nav.png”），指针；
}
第一分区a
{
位置：绝对位置；
顶部：50px；
左：60px；
宽度：400px；
高度：100px；
文字装饰：无；
背景：url（“branding.png”）；
背景重复：无重复；
垫底：35px；
}
第一组a：悬停
{背景：url（“brandingalt.png”）；
背景位置：0px 0px；
背景重复：无重复；
}
第一分区a：现行
{背景：url（“brandingalt.png”）；
背景位置：0px 0px；
背景重复：无重复；
}
第二分区a
{
位置：绝对位置；
top:264px；
左：60px；
宽度：400px；
高度：100px；
文字装饰：无；
背景：url（“marketing.png”）；
背景重复：无重复；
垫底：35px；
}
第二组a：悬停
{背景：url（“marketingalt.png”）；
背景位置：0px 0px；
背景重复：无重复；
}
第三分区a
{
位置：绝对位置；
顶部：457px；
左：56px；
宽度：500px；
高度：100px；
文字装饰：无；
背景：url（“ecommerce.png”）；
背景重复：无重复；
垫底：20px；
}
第三组a：悬停
{背景：url（“ecommercealt.png”）；
背景位置：0 0px；
背景重复：无重复；
}
分区r1 a
{
位置：绝对位置；
顶部：50px；
左：900px；
宽度：400px；
高度：100px；
文字装饰：无；
背景：url（“webdesign.png”）；
背景重复：无重复；
垫底：25px；
}
r1区a：悬停
{背景：url（“webdesignalt.png”）；
背景位置：0px 0px；
背景重复：无重复；
}
分区r2 a
{
位置：绝对位置；
顶部：254px；
左：900px；
宽度：450px；
高度：150像素；
文字装饰：无；
背景：url（“optimization.png”）；
背景重复：无重复；
垫底：20px；
}
r2 a组：悬停
{背景：url（“optimizationalt.png”）；
背景重复：无重复；
}
r3 a分部
{
位置：绝对位置；
顶部：457px；
左：900px；
宽度：400px；
高度：75px；
文字装饰：无；
垫底：20px；
背景：url（packaging.png）；
背景重复：无重复；
}
第3部分a：悬停
{背景：url（“packagingalt.png”）；
背景重复：无重复；
}
$（“a”）。单击（函数（事件）{
event.preventDefault（）；//防止链接更改位置
$（本）
.closest（“div”）//选择链接的父div
.sides（）//选择div的所有同级
.hide（“slow”）//隐藏它们
setTimeout（函数（）{
$（“.go”）.animate（{top:“0”}，“slow”）；}，1200）；
});

如果能更容易地修复旧代码，使元素保持不变，那就更好了。

一个快速修复方法（我不太喜欢）是使用正确的方法