Javascript Jquery隐藏和显示div_Javascript_Jquery_Html

Javascript Jquery隐藏和显示div

javascript jquery html

Javascript Jquery隐藏和显示div,javascript,jquery,html,Javascript,Jquery,Html,您好，我对编码不是很精通。单击背景按钮时，我的内容淡出淡入。如何获取按钮上的文本以显示隐藏内容/显示内容我还需要淡出另外两个div（.button next，.button prev）当单击隐藏内容时有人能帮忙吗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

您好，我对编码不是很精通。单击背景按钮时，我的内容淡出淡入。如何获取按钮上的文本以显示隐藏内容/显示内容

我还需要淡出另外两个div（.button next，.button prev）当单击隐藏内容时

有人能帮忙吗

    <!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>Untitled Document</title>


<script type="text/javascript">

var openingdelay = 200; // Delay before fade in initiated (default is 200)
var closingdelay = 100; // Delay before fade out initiated (default is 100)
var openingspeed = 25; // Speed of fade in (default is 25)
var closingspeed = 15; // Speed of fade out (default is 15)

function Show(elementid) {
    ele = document.getElementById(elementid);
        if(ele.style.display == 'none') {
            ele.style.opacity = 0;
            ele.style.filter = 'alpha(opacity=0)';
            ele.style.display = '';
            valueop = 1;
            setTimeout("fadeIn()", openingdelay);
        } 
        else {
            valueop = 9;
            setTimeout("fadeOut()", closingdelay);
        }
}
        function fadeOut() {
        if(valueop < 1) {
        ele.style.display = 'none';
        return false;
        }
            ele.style.opacity = valueop/10;
            ele.style.filter = 'alpha(opacity='+(valueop*10)+')';
            valueop = valueop - 1;
            setTimeout("fadeOut()", closingspeed);
        }
        function fadeIn() {
        if(valueop > 10) {
        return false;
        }
            ele.style.opacity = valueop/10;
            ele.style.filter = 'alpha(opacity='+(valueop*10)+')';
            valueop = valueop + 1;
            setTimeout("fadeIn()", openingspeed);
        } 


</script>
<style type="text/css">
.layer1 {
margin: 0;
padding: 0;
width: 500px;
}

.background-button {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
float:right;
}
#content {
padding: 5px 10px;
background-color:#000;
float:left; width:400px; height:600px; color:#FFF
}

</style>
</head>

<body>

<div id="content" >Hello! This will remain hidden until the link is clicked.</div>

<div class="background-button"><a href="#" onClick="Show('content'); return false;">Click Me To Reveal More</a></div>

<div style="background-color:#000; color:#FFF; position:absolute; right:0px; top:100px; height:50px; width:100px;" id="button-next">next</div>
<div style="background-color:#000; color:#FFF; position:absolute; right:0px; top:200px; height:50px; width:100px;" id="button-prev">prev</div>


</body>
</html>


无标题文件
var openingdelay=200；//淡入启动前的延迟（默认值为200）
var closingdelay=100；//淡出启动前的延迟（默认值为100）
var openingspeed=25；//淡入速度（默认值为25）
var closingspeed=15；//淡出速度（默认值为15）
功能显示（elementid）{
ele=document.getElementById（elementid）；
如果（ele.style.display==“无”）{
ele.style.opacity=0；
ele.style.filter='alpha（不透明度=0'）；
ele.style.display=''；
valueop=1；
设置超时（“fadeIn（）”，打开延迟）；
} 
否则{
valueop=9；
设置超时（“淡出（）”，关闭延迟）；
}
}
函数衰减（）{
如果（值op<1）{
ele.style.display='none'；
返回false；
}
ele.style.opacity=valueop/10；
ele.style.filter='alpha（不透明度='+（valueop*10）+'）'；
valueop=valueop-1；
设置超时（“淡出（）”，关闭速度）；
}
函数fadeIn（）{
如果（值OP>10）{
返回false；
}
ele.style.opacity=valueop/10；
ele.style.filter='alpha（不透明度='+（valueop*10）+'）'；
valueop=valueop+1；
设置超时（“fadeIn（）”，打开速度）；
} 
.第1层{
保证金：0；
填充：0；
宽度：500px；
}
.背景按钮{
保证金：1px；
颜色：#fff；
填充：3x10px；
光标：指针；
位置：相对位置；
背景色：#c30；
浮动：对；
}
#内容{
填充物：5px10px；
背景色：#000；
浮动：左侧；宽度：400px；高度：600px；颜色：#FFF
}
你好在单击链接之前，此选项将保持隐藏状态。
下一个
上

我将使用注册而不是内联事件处理程序添加事件侦听器：

var button = document.querySelector('.background-button');
button.addEventListener("click", function(){
    Show('content', this.children[0]);
    return false;
});

功能

Show

必须相应地修改为：

function Show(elementid, link) {
    ele = document.getElementById(elementid);
    if (ele.style.display == 'none') {
        ele.style.opacity = 0;
        ele.style.filter = 'alpha(opacity=0)';
        ele.style.display = '';
        valueop = 1;
        setTimeout("fadeIn()", openingdelay);
    }
    else {
        valueop = 9;
        setTimeout("fadeOut()", closingdelay);
    }
    if(link.getAttribute('data-hidden') == "hidden"){
        link.innerHTML = "Click Me To Hide Stuff";
        link.removeAttribute("data-hidden");
    }else{
        link.innerHTML = "Click Me To Reveal More";
        link.setAttribute("data-hidden", "hidden");
    }
}

以下是结果：

我修改了您的html，将其和ID添加到链接：

\show\u more

HTML:

你好！在单击链接之前，此选项将保持隐藏状态。
下一个
上

jQuery：

$('#content, #button-next, #button-prev').hide();
$('#show_more').click(function(e) {
    e.preventDefault(); // disable default <a> behavior

    if ($('#content').is(':visible')) {
        $('#show_more').text('Show Content');
    } else {
        $('#show_more').text('Hide Content');
    }

    $('#content, #button-next, #button-prev').fadeToggle();
});

$（'#content，#button next，#button prev'）。hide（）；
$（“#显示更多”）。单击（函数（e）{
e、 preventDefault（）；//禁用默认值是否需要使用java脚本来完成，因为您可以使用jQuery轻松完成……或者您可以制作一个提琴来演示。在您的问题中提供HTML和CSS。这样我们就可以看到结构并了解我们为您提供的服务。
$('#content, #button-next, #button-prev').hide();
$('#show_more').click(function(e) {
    e.preventDefault(); // disable default <a> behavior

    if ($('#content').is(':visible')) {
        $('#show_more').text('Show Content');
    } else {
        $('#show_more').text('Hide Content');
    }

    $('#content, #button-next, #button-prev').fadeToggle();
});