0

我的页面中有一系列选项卡，我想先隐藏按钮，然后当您单击页面中的某个选项卡时 - 然后显示按钮。这一点我有工作！

我的问题是 - 当我单击另一个选项卡时，我希望hide()再次将按钮设置为。我是新手jQuery，我想我需要添加一个if else声明来做到这一点？

下面的代码：

$(document).ready(function () { 
    $('.myButton').hide();

    $('a.tab1').click(function() {
        $('.myButton').show();
        return false;
    });
    $('.myButton').hide(); // hide again once clicked off the tab.
});
4

7 回答 7

4

此代码仅在您单击具有类的选项卡时才有效tab1。检查页面中的所有选项卡是否具有此类，如果没有，请将此类分配给页面中的所有选项卡。

此外，该功能在这种情况下toggle()起作用。if else因此，如果按钮可见toggle将使其隐藏，否则将使其可见：

<a class="tab1">tab1</a>
<a class="tab1">tab2</a>

$(document).ready(function(){
$('.myButton').hide();

$('.tab1').click(function() {
  $('.myButton').toggle();
});
});

尝试一下

于 2012-12-24T11:00:54.860 回答
3

所以我假设你想用你的按钮跟随。

  1. 页面加载时不应出现
  2. 仅在单击某个选项卡（例如 tab1）时才应出现。
  3. 单击任何其他选项卡（tab1 除外）时应消失。

然后让它变得简单，将您的代码更改为简单。做这个：

<script>
$(document).ready(function(){
  $('.button').hide(0);  //or do it through css
  $('a.tab1').click(function(){
     $('.button').show();

  });

 //otherTab is the class for the tabs other than tab1
 $('a.otherTab').click(function(){
    $('.button').hide();
 });

});
</script>

这是一个超级简单的脚本来实现你想要的。它可以更通用和更短。但是你应该明白这个想法吗？您应该能够选择各自选项卡的点击事件，这就是您需要整理的所有内容。

分配 Id 或 Class 或其他任何东西来清楚地抓住你的标签。

于 2012-12-24T11:10:03.427 回答
0 
$(function(){
    $('div').hide(0);
    $('button').on('click',function(){
    $('div').toggle(200);
    });
});

那么如果你可以/将使用淡入淡出效果来隐藏和显示你的元素点击你可以选择类似的东西（漂亮的动画）：

$(function(){
        $('div').hide(0);
        $('button').on('click',function(){
        $('div').fadeToggle(200);
        });
    });
于 2012-12-24T11:00:43.707 回答
0

参见.toggle()jQuery。具有相同的 if 语句，但由 jQuery 库管理。

http://api.jquery.com/toggle/

于 2012-12-24T11:03:30.177 回答
0

将点击事件添加到所有“选项卡”链接元素的父级。

$('.parentofTabLinks').click(function(event) {
    if($(event.target).is('a.tab1'))
        $('.myButton').show();
    else
       $('.myButton').hide();
});
于 2012-12-24T11:12:38.303 回答
0

保持 jquery dom 搜索，不要错过不保持 html 链接跟随

var mybutton = $("#mybutton");

$('a.tab_who_show').click(function(event)
{
        mybutton.show();
        event.preventDefault();
});

$('a.tab_who_hide').click(function(event)
{
        mybutton.hide();
        event.preventDefault();
});

您还可以使用 jquery.on 在容器上工作

var mybutton = $("#mybutton");
$('#tabs_container').on("click","a.tab_who_hide",function(e){
        mybutton.hide();
        e.preventDefault();
}).on("click","a.tab_who_show",function(e){
        mybutton.show();
        e.preventDefault();
});

并测试类的存在以编写更全局的代码

var mybutton = $("#mybutton");
$('#tabs_container').on("click","a",function(e){
        var needToShow = $(this).hasClass('tab_who_show');
        mybutton.toggle(needToShow);
        e.preventDefault();
});
于 2012-12-24T11:46:24.343 回答
0 
$(document).ready(function(){
    $("button").click(function(){
        // show hide paragraph on button click
        $("p").toggle("slow", function(){
            // check paragraph once toggle effect is completed
            if($("p").is(":visible")){
                alert("The paragraph  is visible.");
            } else{
                alert("The paragraph  is hidden.");
            }
        });
    });
});
于 2019-02-02T08:55:06.443 回答