jQuery Content Switcher (无法使联系人表单在内部工作)
jQuery Content Switcher (Can't make contact form work inside)
我正在尝试使用此内容切换器。
当我将联系表单放在隐藏的div中时,它不起作用。如果我把它放在内容切换器外面,它可以工作。
我知道由于切换器 jquery 代码,没有源 html 可供获取,这就是它不起作用的原因。但我真的需要让它在切换台内工作。有什么方法可以让它工作吗?
该 HTML:
<div id="content3-content" class="message switcher-content">
<p class="medium">Contact Form</p>
<form class="contact" id="contact">
<div class="form">
<input type="text" name="name" placeholder="Name" id="contactname" />
<input type="text" name="email" placeholder="Email" id="contactemail" />
<textarea name="message" placeholder="Message" id="contactmessage"></textarea>
<button>Send</button>
</div>
</form>
</div>
内容切换器 JS:
/* jQuery Content Panel Switcher JS - v1.1 */
var jcps = {};
jcps.fader = function(speed, target, panel) {
jcps.show(target, panel);
if (panel == null) {panel = ''};
$('.switcher' + panel).click(function() {
var _contentId = '#' + $(this).attr('id') + '-content';
var _content = $(_contentId).html();
if (speed == 0) {
$(target).html(_content);
}
else {
$(target).fadeToggle(speed, function() {$(this).html(_content);}).fadeToggle(speed);
}
});
};
jcps.slider = function(speed, target, panel) {
jcps.show(target, panel);
if (panel == null) {panel = ''};
$('.switcher' + panel).click(function() {
var _contentId = '#' + $(this).attr('id') + '-content';
var _content = $(_contentId).html();
if (speed == 0) {
$(target).html(_content);
}
else {
$(target).slideToggle(speed, function(){$(this).html(_content);}).slideToggle(speed);
}
});
};
jcps.show = function (target, panel) {
$('.show').each(function() {
if (panel == null) {
$(target).append($(this).html() + '<br/>');
}
else {
var trimPanel = panel.replace('.', '');
if ($(this).hasClass(trimPanel) == true){$(target).append($(this).html() + '<br/>');}
}
});
}
这是一个小提琴,这就是你想要的吗?
<a href="#" id="content1" class="switcher">Content 1</a>
<a href="#" id="content2" class="switcher">Content 2</a>
<a href="#" id="content3" class="switcher">Content 3</a>
<div id="switcher-panel"></div>
<div id="content1-content" class="switcher-content show">Content 1</div>
<div id="content2-content" class="switcher-content">Content 2</div>
<div id="content3-content" class="switcher-content">
<p class="medium">Contact Form</p>
<form class="contact" id="contact">
<input type="text" name="name" placeholder="Name" id="contactname" />
<input type="text" name="email" placeholder="Email" id="contactemail" />
<textarea name="message" placeholder="Message" id="contactmessage"></textarea>
<button>Send</button>
</form>
</div>
#switcher-panel {
padding-top: 25px;
}
#content1-content,
#content2-content,
#content3-content {
display: none;
}
form {
width: 350px;
}
input[type="text"] {
float: left;
width: 220px;
margin-bottom: 10px;
}
textarea {
float: left;
width: 218px;
height: 100px;
margin-bottom: 10px;
}
button {
float: left;
clear: left;
}
相关文章:
- 在验证和发送邮件后更改联系人表单的 html
- 在联系人表单中实现jQueryAJAX
- jquery.validator和一个页面上的两个联系人表单将在提交时验证空表单
- PHP&jQuery联系人表单错误
- Javascript按钮,它提交联系人表单7表单,然后重定向到URL
- 我正在验证一个联系人表单.我是不是过滤太多了
- 防止联系人表单在提交后消失
- PHP Angular JS联系人表单将't张贴
- 如何在联系人表单7 Wordpress中添加自定义javascript函数
- 如何使javascript联系人表单正确提交
- 在联系人表单中显示隐藏警告被延迟
- 基于AJAX的联系人表单7事件跟踪新的谷歌分析代码
- 映射的联系人表单在Jquery-1.11中无法正常工作
- 激活联系人表单上的输入字段需要在手机上点击2次
- 始终显示联系人表单中的问题成功消息
- HTML5,CSS3,PHP联系人表单不发送信息+添加必填字段
- 联系人表单-提交按钮不起作用
- 加载表单时在警报框中显示父联系人任务
- 如何使用JS清理联系人表单后删除HTML5表单验证
- Ajax表单联系人(jquery)