Question

我的页面中有一系列标签，我想首先隐藏按钮，然后当您点击页面中的某个标签时 - 然后显示按钮。这一点我有用！

我的问题是 - 当我点击另一个标签时，我希望再次将按钮设置为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.
});

Answer 1

此代码仅在您选择具有类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();
});
});

<强> TRY IT

Answer 2

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

页面加载时不应出现
仅在单击某个标签时出现，例如单击tab1。
单击任何其他选项卡（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或类或其他任何内容以明确抓住您的标签。

Answer 3

$(function(){
    $('div').hide(0);
    $('button').on('click',function(){
    $('div').toggle(200);
    });
});

然后，如果您可以/将使用淡入淡出效果隐藏并在点击时显示您的元素，您可以选择类似（漂亮的动画）：

$(function(){
        $('div').hide(0);
        $('button').on('click',function(){
        $('div').fadeToggle(200);
        });
    });

Answer 4

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

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

Answer 5

将click事件添加到所有“tab”链接元素的父级。

$('.parentofTabLinks').click(function(event) {
    if($(event.target).is('a.tab1'))
        $('.myButton').show();
    else
       $('.myButton').hide();
});

Answer 6

保持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();
});

Answer 7

table {
  border-collapse: collapse;
  width:500px;
  height:200px;
  text-align:center;
}
table td, table th {
  border: 1px solid #ddd;
}

jQuery使用if else隐藏和显示按钮

7 个答案: