Javascript 替换Div和重置Div（Jquery）
我有一个有链接的DIV。单击链接时，我希望用表单替换div。当用户需要将“主页”返回到原始div时，只需单击“返回”或类似按钮 以下是我在没有成功的情况下尝试过的： HTMLJavascript 替换Div和重置Div（Jquery）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个有链接的DIV。单击链接时，我希望用表单替换div。当用户需要将“主页”返回到原始div时，只需单击“返回”或类似按钮 以下是我在没有成功的情况下尝试过的： HTML <div id="wrapper" class="toggled"> <div class="container" id="init"> <div class="link-1"> <a class="first" href="#">1st Action
<div id="wrapper" class="toggled">
<div class="container" id="init">
<div class="link-1">
<a class="first" href="#">1st Action</a>
</div>
<div class="link-2">
<a class="second" href="#">2nd Action</a>
</div>
<div class="link-3">
<a class="third" href="#">3rd Action</a>
</div>
</div>
</div>
<div class="container" id="one" style="display:none;">
<input type="button" value="Go Back" id="home"/> One
</div>
<div class="container" id="two" style="display:none;">
<input type="button" value="Go Back" id="home"/> Two
</div>
<div class="container" id="three" style="display:none;">
<input type="button" value="Go Back" id="home"/> Three
</div>
一个
两个
三
var originalState = $("#init").clone();
$(".first").click(function() {
$("#init").replaceWith($("#one"));
});
$(".second").click(function() {
$("#init").replaceWith($("#two"));
});
$(".third").click(function() {
$("#init").replaceWith($("#three"));
});
$("#home").click(function() {
$(<current state>).replaceWith($(originalState));
});
var originalState=$（“#init”）.clone（）；
$（“.first”）。单击（函数（）{
$（“#init”）。替换为（$（“#one”）；
});
$（“.second”）。单击（函数（）{
$（“#init”）。替换为（$（“#两”）；
});
$（“.third”）。单击（函数（）{
$（“#init”）。替换为（$（“#三”）；
});
$（“#主页”）。单击（函数（）{
$（）。替换为（$（原始状态））；
});
这是一个使用javascript（无jQuery）的基本解决方案，希望它能帮助您解决问题
const initDiv=document.getElementById（'init'）；
常量类列表=[“第一”、“第二”、“第三”]；
常量inputClassList=[“一”，“二”，“三]；
让linkIndex=-1；
initDiv.addEventListener（'click'，showInput）；
函数showInput（e）{
让linkIndex=classList.indexOf（e.target.classList[0]）；
如果（链接索引>=0）{
const inputDiv=document.getElementById（inputClassList[linkIndex]）；
const inputButton=inputDiv.children[0]；
inputDiv.classList.remove（'noDisplay'）；；
initDiv.classList.add（'noDisplay'）；
inputButton.addEventListener（'单击'，函数（））{
initDiv.classList.remove（'noDisplay'）；
inputDiv.classList.add（'noDisplay'）；
})
}
}#包装器{
背景色：#999；
}
.noDisplay{
显示：无；
}
.输入{
/*在此设置您不希望输入的css属性
来自包装器div的enherit*/
}
一个
两个
三
const initDiv=document.getElementById（'init'）；
常量类列表=[“第一”、“第二”、“第三”]；
常量inputClassList=[“一”，“二”，“三]；
让linkIndex=-1；
initDiv.addEventListener（'click'，showInput）；
函数showInput（e）{
让linkIndex=classList.indexOf（e.target.classList[0]）；
如果（链接索引>=0）{
const inputDiv=document.getElementById（inputClassList[linkIndex]）；
const inputButton=inputDiv.children[0]；
inputDiv.classList.remove（'noDisplay'）；；
initDiv.classList.add（'noDisplay'）；
inputButton.addEventListener（'单击'，函数（））{
initDiv.classList.remove（'noDisplay'）；
inputDiv.classList.add（'noDisplay'）；
})
}
}#包装器{
背景色：#999；
}
.noDisplay{
显示：无；
}
.输入{
/*在此设置您不希望输入的css属性
来自包装器div的enherit*/
}
一个
两个
三
<html>
<head></head>
<body>
<div id="wrapper" class="toggled">
<div class="container" id="init">
<div class="link-1">
<a class="first" href="#">1st Action</a>
</div>
<div class="link-2">
<a class="second" href="#">2nd Action</a>
</div>
<div class="link-3">
<a class="third" href="#">3rd Action</a>
</div>
</div>
</div>
<div class="container" id="one" style="display:none;">
<input type="button" value="Go Back" class="home"/> One
</div>
<div class="container" id="two" style="display:none;">
<input type="button" value="Go Back" class="home"/> Two
</div>
<div class="container" id="three" style="display:none;">
<input type="button" value="Go Back" class="home"/> Three
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
(function () {
var
allowList = [ '', 'first', 'second', 'third' ],
doDebounce = false
;
$('.first').click(function( event_obj ) {
$('#init').hide();
$('#one').show();
doDebounce = true;
document.location.hash = 'first';
event_obj.preventDefault();
});
$('.second').click(function( event_obj ) {
$('#init').hide();
$('#two').show();
doDebounce = true;
document.location.hash = 'second';
event_obj.preventDefault();
});
$('.third').click(function( event_obj ) {
$('#init').hide();
$('#three').show();
doDebounce = true;
document.location.hash = 'third';
event_obj.preventDefault();
});
$('.home').click(function( event_obj ) {
$('.container').hide();
$('#init').show();
doDebounce = true;
document.location.hash = '';
event_obj.preventDefault();
});
$( window ).on( 'hashchange', function () {
var
page_str = document.location.hash || '',
selector_str = ''
;
if ( page_str.length > 0 ) { page_str = page_str.substr( 1 ); }
if ( allowList.indexOf( page_str ) === -1 ) { return; }
if ( doDebounce ) {
doDebounce = false;
return;
}
selector_str = page_str ? '.' + page_str : '.home';
$( selector_str ).trigger( 'click' );
doDebounce = false;
});
}());
</script>
</html>
一个
两个
三
（功能（）{
变量
allowList=[''‘第一’、‘第二’、‘第三’]，
多德邦克=假
;
$（'.first'）。单击（函数（事件对象）{
$（'#init'）.hide（）；
$（“#一”）.show（）；
多德邦克=真；
document.location.hash='first'；
事件_obj.preventDefault（）；
});
$（'.second'）。单击（函数（事件对象）{
$（'#init'）.hide（）；
$（'#two'）.show（）；
多德邦克=真；
document.location.hash='second'；
事件_obj.preventDefault（）；
});
$（'.third'）。单击（函数（事件对象）{
$（'#init'）.hide（）；
$（'三'）.show（）；
多德邦克=真；
document.location.hash='third'；
事件_obj.preventDefault（）；
});
$（'.home'）。单击（函数（事件对象）{
$（'.container'）.hide（）；
$（'#init'）.show（）；
多德邦克=真；
document.location.hash=''；
事件_obj.preventDefault（）；
});
$（窗口）.on（'hashchange'，函数（）{
变量
page_str=document.location.hash | |“”，
选择器_str=''
;
如果（page_str.length>0）{page_str=page_str.substr（1）；}
if（allowList.indexOf（page_str）=-1）{return；}
如果（多德邦克）{
多德邦克=假；
返回；
}
选择器_str=page_str？'.+page_str:'.home'；
$（选择器）。触发器（'单击'）；
多德邦克=假；
});
}());