Javascript 切换 html 标签页时出现问题，内容消失

Question

我有用于在 <textarea> 中插入表情符号的 EmojioneArea 插件，但是当我切换 html 选项卡时，表情符号插件消失了。我不知道为什么。我将问题写到插件开发人员，他们说插件工作正常，问题出在 javascript 选项卡上。需要一些帮助谢谢！

Html:

<ol class="timeline clearfix">
                <li class="spine"></li><br>
                <li class="left"></li>
                       <div class="boxsh unit" id="tabs">
                         <span class="ajax_indi"> 
                        <!-- Units -->

                        <div class="boxpost tabs1 actionUnits" id="tabs-1">

                            <form id="npost" name="npost">
                                <p class="formUnit" id="Status"> <i class="active"></i>
                                    <textarea class="emojis click url" name="message" placeholder="Write your status here..." id="message" cols="30" rows="3"></textarea>
                                <ul class="controls clearfix" id="tabs">
                                    <li class="post">
                                       <li><a href="#tabs-1"><i class="icon icon-status"></i>Status</a></li>
                                       <li><a href="#tabs-2"><i class="icon icon-photo"></i>photo</a></li>
                                       <li><a href="#tabs-3"><i class="icon icon-video"></i>Video</a></li>
                                         <input class="pull-right uibutton confirm fb_submit" type="button" title="npost" value="Post">
                                    </li>
                                </ul>
                                </p>
                            </form>

                        </div>
                        <div class="boxpost tabs2 actionUnits" id="tabs-2">

                            <form id="picpost" name="picpost">
                                    <p class="formUnit"> <i class="active_pic"></i>
                                     <textarea class="emojis1 click" name="message" placeholder="Photo Description..." id="pmessage" cols="30" rows="3"></textarea> 
                                    <input type="hidden" name="pic_url" id="pic_url">
                                    <button class="btn btn-xs btn-danger" type="button" id="upload_pic">Insert picture</button><span id="statuss"></span>
                                <ul class="controls clearfix" id="tabs">
                                    <li class="post">
                                       <li><a id="#tabs1" href="#tabs-1"><i class="icon  icon-status"></i>Status</a></li>
                                       <li><a id="#tabs-2" href="#tabs-2"><i class="icon  icon-photo"></i>Photo</a></li>
                                       <li><a href="#tabs-3"><i class="icon  icon-video"></i>Video</a></li>
                                          <input class="pull-right uibutton confirm fb_submit" type="button" title="picpost" value="Post">
                                    </li>
                                </ul>
                                </p>
                                <p id="files"></p>
                            </form>
                        </div>
                        <div class="boxpost tabs3 actionUnits" id="tabs-3">

                            <form id="vidpost" name="vidpost">
                                <p class="formUnit" id="Status"> <i class="active_vid"></i>
                                    <textarea name="message" class="emojis2 click" placeholder="Video description..." id="vmessage" cols="30" rows="3"></textarea>
                                    <input type="text" name="y_link" style="width:100%;border-radius: 4px;height: 35px;" id="y_link" placeholder="Youtube Url - www.youtube.com/watch?v=rdmycu13Png">
                                <ul class="controls clearfix" id="tabs">
                                    <li class="post">
                                       <li><a href="#tabs-1"><i class="icon icon-status"></i>Status</a></li>
                                       <li><a href="#tabs-2"><i class="icon icon-photo"></i>Photo</a></li>
                                       <li><a href="#tabs-3"><i class="icon icon-video"></i>Video</a></li>
                                         <input class="pull-right uibutton confirm fb_submit" type="button" title="vidpost" value="Post">
                                    </li>
                                </ul>
                                </p>
                            </form>
                        </div>
            </ol>

Javascript 标签脚本：

      $(document).ready(function() {
        $('#tabs div').hide();
        $('#tabs div:first').show();
        $('#tabs ul li:first').addClass('active');
        $('#tabs ul li a').click(function () {
            $('#tabs ul li').removeClass('active');
            $(this).parent().addClass('active');
             $('#tabs div').hide();
            $($(this).attr("href")).show();

            return false;
        });

// EmojionArea plugin
$('#message').emojioneArea({
    pickerPosition: "bottom",
    filtersPosition: "bottom",
    tones: false,
    autocomplete: false,
    autoHideFilters : true,
    useSprite       : true,
    inline: true
        });
$('#pmessage').emojioneArea({
    pickerPosition: "bottom",
    filtersPosition: "bottom",
    tones: false,
    autocomplete: false,
    autoHideFilters : true,
    useSprite       : true,
    inline: true
        });
$('#vmessage').emojioneArea({
    pickerPosition: "bottom",
    filtersPosition: "bottom",
    tones: false,
    autocomplete: false,
    autoHideFilters : true,
    useSprite       : true,
    inline: true
        });

Answer 1

好的。 here is a working fiddle。我什至不确定如何准确解释问题所在，但我想提供一些反馈。

首先：我怀疑你在这方面有点新，你学习得很好。

您的 HTML 标记有问题
1. 您在不同元素上多次使用了同一 ID。那是不行的。 ID 每页只能使用一次。
2. UL 标签不能在 P 标签内使用，并且 LI 标签不能是其他 LI 标签的直接子标签。
3. 您似乎有多个实际上没有做任何事情的元素实例。
4. 您有太多不必要的标识符。如果选择器没有被用于某些事情，就摆脱它们。它使代码更难使用，并且在出现问题时更难修复。

你的 javascript 中有很多重复。有些东西被添加和删除，又被添加回来，并被多次完成。这是我弄清楚后最终得到的缩减：

$(document).ready(function () {

    $("#message,#pmessage,#vmessage").emojioneArea({
        inline: true,
        hideSource: true,
        pickerPosition: "right",
        tonesStyle: "bullet",
    });

    $('li a').on('click', function (e) {
        if ($(this).is('.active')) {
                e.preventDefault();
            return;
            }
       var activeTab = $(this).attr('href');
        var newTab = $(activeTab);
        var newTabAnchor = newTab.find('a').filter(function (e) {
            return this.href.replace('https://fiddle.jshell.net/_display/','') === activeTab;
        });
        $('.active').removeClass('active');
        newTab.add(newTabAnchor).addClass('active');
    });

});

这基本上是它的多头和空头。我建议您始终保持缩进和对齐。不易阅读的代码很难调试。

祝你好运。

Javascript 切换 html 标签页时出现问题，内容消失

Javascript issue on switching html tabs, content is dissapear

html

javascript

jquery

emojione