Question

大家好，我一直在看看SO和＆＃34; le google＆＃34;尝试找出一种方法，我可以让我的div表现为按钮和切换数据默认隐藏，然后按下按钮时显示。整个想法是我得到ajax数据并显示。但我想选择显示哪些（如果有的话）数据。下面是我目前的尝试和这样的事情！：d
TL; DR - 尝试使用jquery创建按钮，显示按下任何按钮的数据任何帮助，我们表示赞赏

HTML：

<div class="container"> <span class="news">BBC News</span>
 <span class="news">Sky News</span>
 <span class="news">Guardian News</span>
 <span class="news">Channel4 News</span>

</div>
<div class="bbc">bbc</div>
<div class="sky">sky</div>
<div class="guardian">guardian</div>
<div class="channel4">channel4</div>

CSS：

.container {
    overflow: hidden;
    height: 60px;
}
.news {
    background-color: #ff8100;
    border: 2px #d1ec4c outset;
    padding: 1px 4px;
    color: black;
    text-decoration: none;
}
.news:active {
    border-style: inset;
    background-color: #ff8100;
    padding: 2px 3px 0 5px;
    /*shift text 1px to the right and down*/
}

.bbc {

}

JS：

$(document).ready(function() {
    var $content = $(".bbc").hide();
    $(".toggle").on("click", function(e){
        $(this).toggleClass("bbc");
        $content.slideToggle();
    });
});

这是小提琴https://jsfiddle.net/a4tas9qu/5/

Answer 1

我会建议你一个更好的选择。

＆＃13;

$(function () {
  $(".tab").hide();
  $(".tab:first").show();
  $("a").click(function () {
    $(".tab").hide();
    $($(this).attr("href")).show();
    return false;
  });
});

＆＃13;

.container {
  overflow: hidden;
  height: 60px;
}
.news {
  background-color: #ff8100;
  border: 2px #d1ec4c outset;
  padding: 1px 4px;
  color: black;
  text-decoration: none;
}
.news:active {
  border-style: inset;
  background-color: #ff8100;
  padding: 2px 3px 0 5px;
  /*shift text 1px to the right and down*/
}
.bbc {
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="container">
  <a href="#bbc" class="news">BBC News</a>
  <a href="#sky" class="news">Sky News</a>
  <a href="#guardian" class="news">Guardian News</a>
  <a href="#channel4" class="news">Channel4 News</a>
</div>
<div class="tab" id="bbc">bbc</div>
<div class="tab" id="sky">sky</div>
<div class="tab" id="guardian">guardian</div>
<div class="tab" id="channel4">channel4</div>

＆＃13;

jQuery按钮隐藏/显示rss feed切换

1 个答案: