Javascript 如何隐藏div并禁用其中的链接？_Javascript_Jquery_Css_Hide_Hyperlink

Javascript 如何隐藏div并禁用其中的链接？

javascript jquery css hyperlink

Javascript 如何隐藏div并禁用其中的链接？,javascript,jquery,css,hide,hyperlink,Javascript,Jquery,Css,Hide,Hyperlink,我有一个链接在它和下面的第一个另一个我希望第一个消失，这样：第二个不动。所以jQuery函数.hide不是我想要的。链接在第一个div中变为非活动状态。使用javascript或jQuery可以做到这一点吗 PS：如果不可能，我对其他选项感兴趣，其中：第一个隐藏起来。第二个是逐渐移动的。谢谢, 可乐编辑2：你可以看看这把小提琴，看看我想做什么编辑：这里是我的尝试 $("#div1").click(function() { /*actus.fadeOut(

我有一个链接在它和下面的第一个另一个

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

第二个不动。所以jQuery函数.hide不是我想要的。链接在第一个div中变为非活动状态。使用javascript或jQuery可以做到这一点吗

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

第一个隐藏起来。第二个是逐渐移动的。谢谢,

可乐

编辑2：

你可以看看这把小提琴，看看我想做什么

编辑：这里是我的尝试

$("#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;}

固定的。。。他没有放弃。是的，它需要是不透明度以及淡入不透明度的交叉浏览器，以保持位置，但一行jquery做到了这一点

你所要做的就是将fermer改为a标签而不是div，并对它们重新设计一点样式，使它们位于原来的位置

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


     <a href="#" class="fermer">
         fermer
     </a>

使用此类型结构

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

在这里看我的演示，为您的目标使用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>

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

典型的

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

或

为了触发这些，你可以使用javascript，但首先div应该是have 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的

您可能希望使div的大小相同，但如果要使用JavaScript解决方案，则始终可以使用removeAttr'href'禁用链接并将不透明度更改为0。这将使div看起来被删除了，但它仍然在那里，具有相同的高度，而不改变CSS

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

这是我的建议。如果将链接存储在数据属性或id或类似的内容中，则还可以重新启用所有内容。

如果不希望在第一个div隐藏时移动第二个div，请使用CSS样式的可见性：hidden；，这样，隐藏时元素仍会占据页面空间。只需绝对定位您的div，并按您希望的方式隐藏它们。对于逐渐移动第二个div，您可以使用jQuery的幻灯片动画-可能会使用slideUp。您的html代码在哪里？您可以在这里找到解决方案：这将如何阻止第二个div移动以取代丢失的div？您不是说“div1”吗？我希望第一个div的链接处于非活动状态。$'firstdiv a'。clickfunctionevent{event.preventDefault；}不透明度不兼容跨浏览器，您需要为moz添加一个，然后为IE添加过滤器，以使其全面工作。不透明度非常兼容跨浏览器，请参阅。当然，如果跨浏览器兼容性是一个问题，你可以很容易地用fadeTo替换这一行。我们的想法是使用不透明度来删除元素。@RickCalder我认为不透明度很好，除了你必须为IEI添加一个额外的样式外，我尝试过，但它不起作用。请参见小提琴中的蓝色方块：。链接仍处于活动状态。您可能希望使用可见性、隐藏而不是不透明度。如果使用不透明度，您仍然可以单击元素，而可见性确实使其隐藏/不可访问。哇！我不知道小提琴！它很棒：我在js中删除了fidle中的空函数，它仍然可以工作。这个空函数有什么用？非常感谢。没什么，我也删除了它，它有另一个事件，提醒函数是直接从jQuery站点lol完成的。你没有把它们放在它们的包含div中。要关闭的每个分区都必须位于容器div内，容器div有一个设置的高度。请参见此处：将光标也固定在fermer上。问题是我的div没有固定的高度。不会按照他的要求执行，并且您没有jquery的触发器。我可能想重读这个问题。

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

<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>

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