JQuery Content Switcher (не может заставить работать форму контакта внутри)

0

Я пытаюсь использовать этот переключатель контента.

Когда я помещаю контактную форму внутри скрытого div, это не работает. Если я размещаю его вне коммутатора содержимого, он работает.

Я понимаю, что нет источника html для извлечения из jquery-кода коммутатора, поэтому он не работает. Но мне действительно нужно заставить его работать внутри этого коммутатора. Есть ли способ заставить его работать?

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>

Content Switcher 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/>');}
    }
});
}
Теги:
dom

1 ответ

0
Лучший ответ

Здесь FIDDLE, это то, что вы хотели?

<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;
}
  • 0
    Да, большое спасибо.
  • 0
    Пожалуйста ;)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню