Question

我不确定这是否已经得到解答，尝试寻找它但我似乎无法找到它。

我刚刚开始不知道如何做HTML / CSS / Javascript。

无论如何，我正在开发一个类似我们在线交易系统页面的教程。一旦我掌握了它，我已经从一个可怕的大型代码模板变成了我自己做的。

该页面包含多层按钮导航和上下内容以及选项卡。子菜单元素一旦被点击就调用其他中间内容。由于中间内容不同于父节点，因此我不能对每个子菜单元素使用通用jquery函数。

这就是我所拥有的

HTML：示例按钮 - 我有其他按照相同的按钮 - ct按钮，ns按钮，mt按钮......

<div id="" class="so button">
  <ul id="" class="somenu button check">
      <li id="sotab"/>
      <li/>
      <li/>
      <li/>
  </ul>
</div>

<div class="midcontent">
   <div class="quotetab active"></div>
   <div class="uppertab">
       <span class="sotab tab"><img/></span>
   </div>
<div class="midct midct-stockinfo"></div>
</div>

Jquery：按钮互动的通用呼叫

$(document).ready(function() {
   $(".button").click(function() {
      if($(this).hasClass("pressed")) {
         $(this).removeClass("pressed");
     $(this).children().removeClass("active");
    return false;
      } else {
         $(".button").removeClass("pressed");
         $(".button").children().removeClass("active");
         $(this).addClass("pressed");
     $(this).children().addClass("active");
    return false;
      }
   });

该jquery代码是我用于页面顶部按钮的代码。我计划使用与“li”一起点击后学到的相同代码，但这需要我将所有元素嵌套在单个父级上才能使其工作，因此，我结束了为每个链接制作一个。

   $(".somenu").find("li:first-child").click(function(){
      $(".tab, .quotetab, .midct").removeClass("active");
      $(".sotab").css({display: "inline-block"}).addClass("active");
      $(".midct-stockinfo").addClass("active");
   });

点击li：first-child后，它会从任何活动的midcontent中删除焦点，并且它会突出显示我点击的内容。

我对菜单按钮中的每个li都有相同的代码流，我只是将类从.somenu更改为其他（.ctmenu等）并相应地调整目标对象。

您对如何最小化我正在使用的代码有什么想法吗？

我能够获得一个片段，它可以读取id，并查找具有相同名称的类，但我似乎无法使其工作：

$(".button > li").click(function() {
    var containerID = this.id;
    $("." + containerID).addClass("active");
});

根据我的理解，我只需要为li添加一个ID，以便他们可以从代码中调用目标对象。

我做错了吗？

感谢。

Answer 1

我们可以找到带有后代所述类的midcontent元素，然后将活动类添加到其中的tab和midct-stockinfo元素

$(".button > li").click(function () {
    var $target = $('.midcontent:has(.' + this.id + ')');
    $(".tab, .quotetab, .midct").removeClass("active");

    $target.find(".sotab").css({
        display: "inline-block"
    }).addClass("active");
    $target.find(".midct-stockinfo").addClass("active");
});

调用具有与目标对象相同ID的不同父项的元素？

1 个答案: