@mitya6

Как упростить код и как переключать вкладки?

Всем привет. Пишу чат. Столкнулся с проблемами ... решил спросить !
codepen.io/Zamay/pen/XpEvrN?editors=1010

Написал код , хоть он еще и не полностью работает , но хотел спросить как можно его упрости или переписать! Как по мне он большой. Да и другие варианты реализации тоже интересно посмотреть.

Тоже прошу помочь с кодом. Реализовать нормально удаление и переключение закладок, отправку сообщений. Ну а больше всего это масштабируемые закладки - как в хроме.
Буду благодарен.
$(function () {

    $(".wrap-tab-content div").hide();
    $(".tabs li a").removeClass("active");
    $(".main_menu a").addClass("active");
    $(".wrap-tab-content #main_menu").show();

//Создание закладок
    $(document).on('click', '.user', function () {
        if ($('.wrap-tab-content div').is(this.hash)) {
            $(".wrap-tab-content div").hide();
            $(this.hash).show();

            //.... не переключаются закладки
            return false;
        } else {

            if ($(".tabs li a").length >= 7) {
                alert('Close tabs! Limit 7');
            }
            else {
                //createTab();
                countTabs = parseInt($(".tabs li a").length) + 1;

                $(".wrap-tab-content div").hide();
                $(".tabs li a").removeClass("active");

                $('<li>', {
                    class: 'tab' + (countTabs-1)
                }).appendTo('.tabs');

                $('<a>', {
                    href: this.hash.replace('', ''),
                    text: 'UserMane'// Значение нажатой вкладки слева
                }).appendTo('.tabs li:last').addClass("active");

                $('<i>', {
                    class: 'ion-close-circled'
                }).appendTo('.tabs li a:last');

                $('<div>', {
                    id: this.hash.replace('#', '')
                }).text('New div id: ' + this.hash).appendTo('.wrap-tab-content');
            }
            return false;
        }
    });

//переключение закладок
    $(document).on('click', '.tabs li a', function () {
        $(".wrap-tab-content div").hide();
        $(this.hash).show();
        $(".tabs li a").removeClass("active");
        $(this).addClass("active");

        return false;
    });

  // Удалить 
    $(document).on('click', '.ion-close-circled', function () {
        $(this).closest("li").remove();
        var tabHref = $(this).parent().attr('href');
        $(tabHref).remove();

      //Найти последнию закладку и cделать активной + вывести текст
        var last = $('.tabs li:last-child')[0];
        var a = $(last).children()
        a.addClass("active");

        return false;
    });
});

//отправка сообщения 
$(document).on('click', '#send', function () {
 var text = $('#textarea').val();
 $(".wrap-tab-content ").append("<p>" + text+ "</p>");
  // $(".wrap-tab-content div").after("<p>" + text+ "</p>");
});
  • Вопрос задан
  • 199 просмотров
Пригласить эксперта
Ответы на вопрос 1
cha-cha
@cha-cha
Как вариант выкинуть все к чертям и переписать на Vue.js
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы