正文 

当前位置： 首页 > 问答 >

jQuery 选项卡隐藏/显示面板以及选项卡背景更改

     2023-03-21     207

关键词：

【中文标题】jQuery 选项卡隐藏/显示面板以及选项卡背景更改【英文标题】：jQuery tabs hide/show panels plus tab background change 【发布时间】：2013-04-27 16:33:49 【问题描述】：

我尝试了所有我知道的东西（不像我是 javascript/jquery 的新手）。

我有两个按钮 A 和 B。单击每个按钮时显示/隐藏（切换）A 各自的 B 内容。一次只能有一个按钮处于按下状态并显示其内容，因此，如果我单击 A 时 B 按钮及其内容处于活动状态，则 A 按钮进入按下状态，A 内容显示，B 按钮进入未按下状态并且B 内容隐藏。 “按下状态”是指不同的背景颜色。此外，如果仅按下 A 按钮并且其内容可见，如果我再次按下它，A 按钮将变为未按下并且其内容隐藏，对于 B 也是如此。

我认为下面的代码很乱，我真的尝试了所有方法，但 js 和 jquery 不是我的东西..

谁能告诉我如何使这项工作？非常感谢！..

$(function() 
                $('#login').click(function() 
                    $('.login').slideToggle('slow');
                    $('#login').toggleClass('btn_on');
                    $("#register:visible").toggleClass("btn_off");
                    $('.register:visible').slideToggle('slow');

                    return false;
                );

                $('#register').click(function() 
                    $('.register').slideToggle('slow');
                    $('#register').toggleClass('btn_on');
                    $("#login:visible").toggleClass("btn_off");
                    $('.login:visible').slideToggle('slow');
                    return false;
                );

            );

【问题讨论】：

你也可以发布你的html 【参考方案1】：

试试这个：jsfiddle

CSS：

.press

background-color:green;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;

#input_text

background-color:black;
color:white;
font-weight:bold;
width:300px;
height:100px;

HTML：

<input type='button' id='but_a' class='normal' value='button A' />
<input type='button' id='but_b' class='normal' value='button B' />

<br />
<br />
<div id='input_text'></div>

jquery：

$('#input_text').hide()

var textim = new Array();
    textim['but_a'] = 'button A text is now displayed';
    textim['but_b'] = 'button B text is now displayed';

$('.normal').click(function() 
    if($(this).hasClass('press'))
    
        $(this).removeClass('press');
        $('#input_text').slideUp('slow', function()  $('#input_text').empty(); );
    
    else
    
        $('.normal').removeClass('press');
        $(this).addClass('press');
            var idd = $(this).attr('id');
            $('#input_text').empty();
            $('#input_text').slideDown('slow', function()   $('#input_text').text(textim[idd]);  );

    
);

玩得开心……

编辑：

请注意 - 数组 (textim) 键应设置为与您要触发的按钮相同的 id。

【讨论】：

非常感谢，我试试看:) 如果您需要更多更改，请告诉我

JQuery UI 选项卡背景颜色

】JQueryUI选项卡背景颜色【英文标题】：JQueryUITabsBackgroundColor【发布时间】：2013-02-2503:44:04【问题描述】：我正在尝试更改选项卡区域的背景。例如，您有一个选项卡列表，我知道如何更改每个选项卡的颜色，但我想知道您是否... 查看详情

flex中tabnavigator隐藏和显示选项卡

1、问题背景   遇到这样一个问题：有四个Tab选项卡。依据不同的參数隐藏和显示选项卡2、实现实例（1）隐藏“春季”protectedfunctionspringClickHandler(event:MouseEvent):void{ tabs.getTabAt(0).visible=false; tabs.getTabAt(0).includeInLayout=fa 查看详情

flex中tabnavigator隐藏和显示选项卡

1、问题背景   遇到这样一个问题：有四个Tab选项卡。依据不同的參数隐藏和显示选项卡2、实现实例（1）隐藏“春季”protectedfunctionspringClickHandler(event:MouseEvent):void{ tabs.getTabAt(0).visible=false; tabs.getTabAt(0).includeInLayout=fa 查看详情

如何在 ext JS/Sencha 中隐藏选项卡面板

】如何在extJS/Sencha中隐藏选项卡面板【英文标题】：HowtohidetabpanelinextJS/Sencha【发布时间】：2017-04-1111:12:29【问题描述】：在我的应用程序中隐藏选项卡面板时出现问题。行。我尝试在我的应用程序中做什么..请看下图您可以看到... 查看详情

在视图中动态添加 jquery 选项卡

】在视图中动态添加jquery选项卡【英文标题】：dynamicallyaddjquerytabinview【发布时间】：2011-12-2913:39:03【问题描述】：我对MVC和jQuery非常陌生，在向jQuery选项卡面板添加新选项卡时遇到问题。我有一个包含两个局部视图的ASP.NETMVC3... 查看详情

创建后显示新的 Jquery UI 选项卡

】创建后显示新的JqueryUI选项卡【英文标题】：ShownewJqueryUITabaftercreatingit【发布时间】：2019-01-0700:56:22【问题描述】：当用户添加新选项卡时，我正在尝试让jQueryUI选项卡在浏览器中显示（打开与选项卡关联的面板）。目前这就... 查看详情

如何使 jQuery UI 选项卡在激活选项卡时执行“显示：flex”而不是“显示：阻止”？

】如何使jQueryUI选项卡在激活选项卡时执行“显示：flex”而不是“显示：阻止”？【英文标题】：HowtomakejQueryUITabsdo\'display:flex\'insteadof\'display:block\'onactivatingatab?【发布时间】：2016-10-1911:27:08【问题描述】：我的jQueryUI选项卡有一... 查看详情

隐藏“帮助”™管理面板的选项卡

functionhide_help(){echo'<styletype="text/css">#contextual-help-link-wrapdisplay:none!important;</style>';}add_action('admin_head','hide_help'); 查看详情

如何在 ext4.1 中隐藏选项卡？

】如何在ext4.1中隐藏选项卡？【英文标题】：Howtohideatabinext4.1?【发布时间】：2012-08-2309:40:28【问题描述】：如何动态隐藏标签面板的标签？我正在使用方法tabpanel.items.items[0].tab.setVisible(false);但是使用上述方法，它正在破坏该选... 查看详情

如何使用 jQuery 切换选项卡，而不关闭相邻的选项卡。

】如何使用jQuery切换选项卡，而不关闭相邻的选项卡。【英文标题】：HowtoToggleTabswithjQuery,withoutclosingadjacenttabs.【发布时间】：2012-05-0617:18:43【问题描述】：很难弄清楚这一点。我在页面顶部有3个标签。在页面加载时，它们是隐... 查看详情

根据范围输入显示/隐藏引导选项卡/药丸

】根据范围输入显示/隐藏引导选项卡/药丸【英文标题】：Show/hideBootstraptab/pillbasedonrangeinput【发布时间】：2017-09-2608:12:43【问题描述】：请在此处参考我的JSFiddle。我在顶部使用Bootstrap选项卡，显示或隐藏的“菜单”选项卡的数... 查看详情

Jquery ui 工具 - 选项卡窗格一次全部显示

】Jqueryui工具-选项卡窗格一次全部显示【英文标题】：Jqueryuitools-tabpanesallshowingatonce【发布时间】：2010-12-2716:18:20【问题描述】：我正在为我的选项卡使用Jquery工具-出了点问题，我不知道（因为一切正常）..由于某种原因，所有... 查看详情

grafana-graph面板用法

...面板被简单地命名为Graph。它提供了一组非常丰富的图形选项。1、单击面板的标题会显示一个菜单。edit选项将为面板打开其他配置选项。2、单击以打开颜色和轴选择。3、单击此处只显示本时间序列。Shift/Ctrl+点击隐藏时间序列... 查看详情

使用 jQuery.Validate 显示正确的面板

】使用jQuery.Validate显示正确的面板【英文标题】：DisplayingcorrectpanelusingjQuery.Validate【发布时间】：2018-12-1821:26:57【问题描述】：我有一个如下所示的选项卡式面板：Student选项卡有StudentName，Mark选项卡有Math。这是我的模特：publicc... 查看详情

jQuery 选项卡 - 获取新选择的索引

】jQuery选项卡-获取新选择的索引【英文标题】：jQuerytabs-gettingnewlyselectedindex【发布时间】：2010-09-1603:51:46【问题描述】：我之前使用jquery-uitabs扩展通过ajax加载页面片段，并在页面中隐藏或显示隐藏的divs。这两种方法都有很好... 查看详情

如何在 Liferay 控制面板中隐藏“我的帐户”portlet 中的选项卡

】如何在Liferay控制面板中隐藏“我的帐户”portlet中的选项卡【英文标题】：HowtohidetabsfromMyAccountportletinLiferay\'sControlPanel【发布时间】：2012-03-1112:17:08【问题描述】：伙计们，我需要删除“我的帐户”portlet左侧导航中所有不必要... 查看详情

将 TabBarView 中的其他选项卡更改为其他选项卡时，键盘仍然显示

】将TabBarView中的其他选项卡更改为其他选项卡时，键盘仍然显示【英文标题】：KeyboardisstillshowingwhenchangingthetootherTabinaTabBarView【发布时间】：2019-10-2306:41:33【问题描述】：在一个选项卡中，我有一个TextFormField，而在另一个选项... 查看详情

Sencha 触摸在选项卡面板中显示图像

】Sencha触摸在选项卡面板中显示图像【英文标题】：Senchatouchdisplayingimagewithintabpanel【发布时间】：2012-05-1815:27:54【问题描述】：我试图在view.js中显示没有标签面板的图像但是，尽管遵循了文档，但它似乎无法正常工作。谁能帮... 查看详情