0

我有一个<div>带有链接的链接，另一个<div>位于第一个下方。

我希望第一个消失，这样：

  • 第二个<div>不动。所以jQuery函数.hide()不是我想要的。
  • 链接在第一个 div 中变为非活动状态。

是否可以使用 javascript 或 jQuery 来做到这一点？

PS：如果不可能，我对其他选项感兴趣：

  • 第一个<div>隐藏。
  • 第二个<div>逐渐移动。

谢谢，

可乐

编辑 2：

您可以查看此文件http://jsfiddle.net/XKMEp/5/以了解我尝试执行的操作。

编辑：这是我的尝试

$("#div1").click(function() {       
    /*actus.fadeOut('slow');*/
    actus.fadeTo(1000,0).delay(1001).style.visibility = 'hidden';
    $('input,textarea,select,a', '#div1').attr("disabled", true);
});

即使这样也行不通：

$("#div1").click(function() {       
    /*actus.fadeOut('slow');*/
    actus.fadeTo(1000,0).delay(1001).style.visibility = 'hidden';
    $('input,textarea,select,a', '#div1').attr("disabled", true);
});

假设我的 html 代码是：

<div class="container">
    <div id="div1"></div>
</div>
    <div class="container">
<div id="div2"></div>
</div>


.container{width:300px;height:300px;}
4

6 回答 6

1

您可能希望使 div 具有相同的大小，但如果您想使用 JavaScript 解决方案，您始终可以使用removeAttr('href')来禁用链接并将不透明度更改为 0。这将给出div已删除但仍然存在的外观在不改变 CSS 的情况下保持相同的高度。

$('#first').on('click', function() {
    $(this).css('opacity', '0');
    $(this).children('a').removeAttr('href');        
}​​​​​​​​);​

这是jsFiddle 解决方案。如果您将链接存储在数据属性或 id 或类似的东西中，您还可以重新启用所有内容。

于 2012-11-01T05:29:23.867 回答
0 
$('#second').css({"visibility":"hidden"});
  $('#firstdiv a').click(function(event){
    event.preventDefault();
      }             
);
于 2012-11-01T05:24:52.410 回答
0

在这里查看我的演示，使用 style.visibility 作为您的目标，如果您想移动第二个 div 的位置，请使用 style.display；（不过，这不是渐进的）

<html>
<head>

<title>div test</title>

<script type="text/javascript">
function show(){
document.getElementById("div1").style.visibility = "visible";
document.getElementById("div1").style.display = "block";

}
function change1(){
document.getElementById("div1").style.visibility = "hidden";
}
function change2(){
document.getElementById("div1").style.display = "none";
}


</script>

</head>

<body>

<div id="div1" style="background:red; height:50px">
    first div: <a href="http://www.hetaoblog.com" target="_blank">a link to http://www.hetaoblog.com</a>
</div>

<div>
    2nd div    allaala   <br />
    <button onclick="show()">show</button>   <br />
    <button onclick="change1()">change1</button>   <br />
    <button onclick="change2()">change2</button>   <br />

</div>


</body>

</html>
于 2012-11-01T05:26:18.890 回答
0

也许您可以添加代码以更好地理解您的问题。

通常

style="display:none;" //will hide the div
style="display:block;" //will display the div

或者

style="visibility:hidden" //will hide the div
style="visibility:visible" //will display the div

为了触发这些你可以使用javascript（但首先div应该有ID）

<script>
ns4 = (document.layers) ? true:false
ie4 = (document.all) ? true:false 
ng5 = (document.getElementById) ? true:false

// Works for all browsers irrespective of its release date :p

function hidediv() {
if (ng5) document.getElementById('div1').style.visibility = "hidden"
else if (ns4) document.div1.visibility = "hide"
else if (ie4) div1.style.visibility ="hidden"
}

function showdiv(n){
if (ng5) document.getElementById('div1').style.visibility = "visible";
else if (ns4) document.div1.visibility = "show";
else if (ie4) div1.style.visibility = "visible";
</script>

调用函数来隐藏/显示 div

于 2012-11-01T05:27:28.703 回答
-1

固定...没有放弃。是的，它需要是不透明度（对于跨浏览器来说，淡入不透明度）才能保持位置，但是一行 jquery 就可以了。http://jsfiddle.net/calder12/XKMEp/24/

您所要做的就是将 fermer 更改为标签而不是 div 并重新设置它们的样式以将它们放在您拥有它们的位置。

    $(".fermer").click(function() {
    $(this).closest('div').fadeTo('slow',0);
    });
​

     <a href="#" class="fermer">
         fermer
     </a>
于 2012-11-01T05:19:55.350 回答
-1

使用这种类型结构

<div id="main">
 <div id="first">
   <a href="javascript:void(0);" id="link">Hide</a>
</div>
<div id="second">
 content
</div>
</div><!-- Main div -->

jQuery

 $("#link").click(function() {
  $("#first").hide();
});
于 2012-11-01T05:20:35.460 回答