sidemenuTab

sidemenuTab

关注
发信
关注(28)粉丝(399)

jquery - 如何使用jQuery将侧边菜单选项卡显示为当前选项卡？

我正在一个项目中，当您单击它时，它具有两个按钮“电子邮件”和“系统”，它构成一些元素。例如，如果您单击“电子邮件”按钮，则其将成为“电子邮件”标签，并且在“电子邮件”标签下方也有“＃”按钮。两个按钮的底下元素都与系统按钮相同，但是我的问题是单击“＃”按钮时它在电子邮件选项卡中显示了sidemenuTab。但是不幸的是，当我单击系统选项卡中的“＃”按钮时，却没有显示sidemenuTab。相反，它会在选项卡菜单中显示sidemenuTab。

http://jsfiddle.net/v6awanwn/7/

jquery - 如何使用jQuery将侧边菜单选项卡显示为当前选项卡？-LMLPHP

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

</head>
<style>
    #mainTab li span {
    position: relative;
    top: -31px;
    left: 5px;
}
</style>
<body>
    <div>
        <ul>
            <li class="gtab">
                <a><span title="email">Email</span></a>
            </li>
            <li class="gtab">
                <a><span title="system">system</span></a>
            </li>
        </ul>
    </div>
    <div class="tabbable" id="tabpanel">
        <ul id="mainTab" class="nav nav-tabs"></ul>
        <div class="tab-content">
        </div>
    </div>
   <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>





$("#mainTab").on("click", "a", function (e) {
    e.preventDefault();

    $(this).tab('show');
})
    .on("click", "span", function () {
        var anchor = $(this).siblings('a');
        $(anchor.attr('href')).remove();
        $(this).parent().remove();
        $(".nav-tabs li").children('a').first().click();
    });

$('.gtab').click(function (e) {
    $('.tab-container').removeClass('invise');
    e.preventDefault();
    var id = $("#mainTab").children().length + 1;
    var tabId = 'contact_' + id;
    var tabtitle = $(this).find('span').html();

    if ($("#mainTab li").find('a').text().indexOf(tabtitle) >= 0)
        return;

    $('#mainTab').closest('li').before('<li><a href="#contact_' + id + '">New Tab</a> <span> x </span></li>');
    $('<li class="tab"><span> × </span><a href="#contact_' + id + '">' + tabtitle + '</a></li>').appendTo('#mainTab');

    $('#tabpanel .tab-content').append('<div style="height:100%;padding:0px;" class="tab-pane" id="' + tabId + '"><div id="tabmenutop" style="height:30px;background-color:#2c3543"><ul style="list-style:none;padding-right:15px;line-height:29px;margin-bottom:0;float:right;"><li style="display:inline-block;"><span style="color:#fff;font-size:16px;position:relative;top:5px;"><i class="ti-search"></i></span></li><li style="display:inline-block;"><span style="color:#fff;padding-right:10px;">' + tabtitle + '</span></li></ul><span id="showmenu" style="float:left;" > <a style="color:#5F8295 !important;font-size:16px;"><i class="ti-align-justify"></i></a></span ><ul class="sidemenuul" style= "list-style:none;margin-bottom:0;float:left;padding-left:5px;" > <li style="display:inline-block;"><img src="assets/images/gardeshkar.png" alt="گردش كار" title="گردش كار" style="padding:3px 2px;" /></li> <li style="display:inline-block;"><img src="assets/images/marahel.png" alt="مراحل گردش كار" title="مراحل گردش كار" style="padding:3px 2px;" /></li> <li style="display:inline-block;"><img src="assets/images/asl mostanad.png" alt="مشاهده اصل مستند" title="مشاهده اصل مستند" style="padding:3px 2px;" /></li><li style="display:inline-block;"><img src="assets/images/form mortabet.png" alt="فرم‌هاي مرتبط" title="فرم‌هاي مرتبط" style="padding:2px;" /></li> <li style="display:inline-block;"><img src="assets/images/Form Mortabet Jadid.png" alt="ايجاد فرم مرتبط" title="ايجاد فرم مرتبط" style="padding:3px 2px;" /></li> <li style="display:inline-block;"><img src="assets/images/LOG.png" alt="رخدادهاي فرم" title="رخدادهاي فرم" style="padding:3px 2px;" /><li class="togglemenu" style="display:inline-block;"><a class="btn btn-default">#</a></li></li></ul ></div > <div class="col-lg-11 col-sm-10 col-xs-9" style="max-height:648px;height:auto;overflow:auto;float:right;">Galex web Design</div> <div id="sidemenuTab" class="col-lg-1 col-sm-2 col-xs-3 hidden" style="height:600px;float:left;background-color:#2c3543;padding:2px;"><ul style="list-style:none;padding-right:0;padding-left:0;text-align:center;"><li style="margin:5px;"><a class="btn btn-default  btn-block" style="background-color:#2c3543;">حذف</a></li><li style="margin:5px;"><a class="btn btn-default  btn-block" style="background-color:#2c3543;">جديد</a></li><li style="margin:5px;"><a class="btn btn-default  btn-block" style="background-color:#2c3543;">انصراف</a></li><li style="margin:5px;"><a class="btn btn-default btn-block" style="background-color:#2c3543;">ثبت</a></li></ul></div></div > ');

    $('#mainTab li:nth-child(' + id + ') a').click();
});

$(document).on('click', 'li.togglemenu', function () {
    //console.log('testtogglemenu');

    if ($('#sidemenuTab').hasClass('hidden')) {
        $('#sidemenuTab').removeClass('hidden');
        $('#sidemenuTab').removeClass('slideOutLeft');
        $('#sidemenuTab').delay(800).css('display', 'block').fadeIn(1000).addClass('animated slideInLeft');
    }
    else {
        $('#sidemenuTab').addClass('animated slideOutLeft');
        $('#sidemenuTab').addClass('hidden');
        $('#sidemenuTab').removeClass('slideInLeft');
    }
})

最佳答案

您的问题仅是由以下片段中的选择器$('#sidemenuTab')引起的：

if ($('#sidemenuTab').hasClass('hidden')) {
    $('#sidemenuTab').removeClass('hidden');
    $('#sidemenuTab').removeClass('slideOutLeft');
    $('#sidemenuTab').delay(800).css('display', 'block').fadeIn(1000).addClass('animated slideInLeft');
}
else {
    $('#sidemenuTab').addClass('animated slideOutLeft');
    $('#sidemenuTab').addClass('hidden');
    $('#sidemenuTab').removeClass('slideInLeft');
}


sidemenuTab是一个ID。只能有一个具有特定ID的元素实例。

您可以遵循几种不同的更改路径来解决此问题。


您将sidemenuTab更改为每个选项卡都有唯一的名称。当然，这将需要您在事件处理程序中放入一些逻辑，以确定要切换的选项卡。
您更改$('#sidemenuTab')选择器以查找在click事件的当前选项卡中找到的sidemenuTab。


就个人而言，我进行了更改以遵循建议2，因为它需要对现有代码进行最少的更改。在下面的代码段中，我所做的是查看$(this)所指的含义，并转到$(this)和$('#sidemenuTab')之间最接近的共享亲戚。查看代码的结构，两个选择器的最接近的共享亲戚是.tab-pane。找到最接近的共享亲戚后，我们可以调用.find查找sidemenuTab，然后继续进行正常操作。这一切最终看起来像这样：

if ($(this).closest('.tab-pane').find('#sidemenuTab').hasClass('hidden')) {
    $(this).closest('.tab-pane').find('#sidemenuTab').removeClass('hidden');
    $(this).closest('.tab-pane').find('#sidemenuTab').removeClass('slideOutLeft');
    $(this).closest('.tab-pane').find('#sidemenuTab').delay(800).css('display', 'block').fadeIn(1000).addClass('animated slideInLeft');
}
else {
    $(this).closest('.tab-pane').find('#sidemenuTab').addClass('animated slideOutLeft');
    $(this).closest('.tab-pane').find('#sidemenuTab').addClass('hidden');
    $(this).closest('.tab-pane').find('#sidemenuTab').removeClass('slideInLeft');
}


当然，不断调用$(this).closest('.tab-pane').find()会浪费资源，因此您可以将以上功能进一步浓缩为：

var $sideMenuTab = $(this).closest('.tab-pane').find('#sidemenuTab');
if ($sideMenuTab.hasClass('hidden')) {
    $sideMenuTab
       .removeClass('hidden')
       .removeClass('slideOutLeft')
       .delay(800)
       .css('display', 'block')
       .fadeIn(1000)
       .addClass('animated slideInLeft');
}
else {
    $sideMenuTab
       .addClass('animated slideOutLeft')
       .addClass('hidden')
       .removeClass('slideInLeft');
}


这是您的jsFiddle的modified, working version，具有上述更改。

09-25 17:36
Powered by LMLPHP ©2024 sidemenuTab 0.031295