Question

我有这个代码我想知道是否有更短的编写方式？

在相关的div

上，我还需要使用哪个代码使活动标签保持活动状态

感谢

$(document).ready(function () {



$(".overveiw").click(function () {
    $(".div1").show();
    $(".div2").hide();
    $(".div3").hide();
    $(".div4").hide();
    $(".div5").hide();
});
$(".tour").click(function () {
    $(".div2").show();
    $(".div1").hide();
    $(".div3").hide();
    $(".div4").hide();
    $(".div5").hide();
});

$(".websites").click(function () {
   $(".div3").show();
   $(".div1").hide();
   $(".div2").hide();
   $(".div4").hide();
   $(".div5").hide();
});

$(".faq").click(function () {
    $(".div4").show();
    $(".div1").hide();
    $(".div3").hide();
    $(".div2").hide();
    $(".div5").hide();
});

$(".support").click(function () {
   $(".div5").show();
   $(".div1").hide();
   $(".div3").hide();
   $(".div4").hide();
   $(".div2").hide();
});
});

Answer 1

看起来你要做的就是显示一个div并在点击其他元素时隐藏其他一些div - 例如，标签界面。

简单的方法是使用某人已经为您构建的内容，例如jQuery UI's tabs。

但你也可以通过给出一些共同的信息，轻松地将div显示为显示/隐藏（面板）和你点击的div（标签）。例如，如果在面板上放置一个属性来标识它们所属的选项卡，则会缩短很多时间：

$(".overview, .tour, .websites, .faq").click(function() {
    var thisTab = $(this).attr("data-panel");
    var container = $("#container");
    container.find("div").hide();
    container.find("div[data-panel=" + thisTab + "]").show();
});

...如果您在同意的选项卡和面板上放置data-panel属性，则有效。 Live example

但是如果你在没有JavaScript的情况下运行那个实例，请注意它不会很好地降级。这就是为什么你通常会看到这个用导航的列表和锚点完成的，例如：

<ul id='tabs'>
  <li class="overview"><a href="#overview">Overview</a></li>
  <li class="tour"><a href="#tour">Tour</a></li>
  <li class="websites"><a href="#websites">Websites</a></li>
  <li class="faq"><a href="#faq">FAQ</a></li>
</div>
<div id='container'>
  <div id="overview">The overview panel</div>
  <div id="tour">The tour panel</div>
  <div id="websites">The websites panel</div>
  <div id="faq">The FAQ panel</div>
</div>

使用此代码：

$("#container div:not(#overview)").hide();
$("#tabs > li > a").click(function() {
  var thisTab = this.href;
  var index = thisTab.indexOf("#");
  if (index >= 0) {
    thisTab = thisTab.substring(index + 1);
  }
  $("#container div").hide();
  $("#" + thisTab).show();
  return false;
});

Live example

Answer 2

给每个div另一个类：

<div class="div1 new_class"></div>

然后：

$(".overveiw").click(function () {
    $(".new_class").hide();
    $(".div1").show();
});

javascript / jquery简写代码和活动函数

2 个答案: