Question

我对javascript很新手，无法获得根据所选菜单项显示/隐藏div的页面的工作版本。我总是结束只有菜单项可见。如何从菜单中访问和控制html的内容部分。

隐藏很可能很简单，例如：

$("#div1").hide();
$("#div2").hide();

但我还没有找到一种方法来显示与菜单选择和隐藏休息相关的div。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <style>
      // menu css 
      .hor_menu{display: inline-block;}
      .hor_menu{ height: 25; font-size: 18px;}
      .hor_menu li{list-style: none; float: left; margin-right: 4px; padding: 5px;}
      .hor_menu li.active {
        background-color: #e9e9e9;
      }
      .hor_menu li:hover {text-decoration: underline;}
    </style>
  </head>
  <body>
    //top menu
    <ul class="hor_menu" id="menu">
      <li a class="active" id="item1"><a>Menu item 1</a></li>
      <li id="item2">Menu item 2</li>
      <li id="item3">Menu item 3</li>
    </ul>
    // content divs
    <div id="div1">
      <p>Show me when menu item 1 selected</p>
    </div>
    <div id="div2">
      <p>Show me when menu item 2 selected</p>
    </div>
    <div id="div3">
      <p>Show me when menu item 3 selected</p>
    </div>
    <script type="text/javascript">
      var make_menuitem_active = function()
      {
        //Get menu siblings
        var siblings =($(this).siblings());

        //Deactivate selection
        siblings.each(function (index)
          {
            $(this).removeClass('active');    
          }
        )
        //Add the clicked button class
        $(this).addClass('active');
      }
      //Attach events to menu
      $(document).ready(
        function()
        {
          $(".hor_menu li").click(make_menuitem_active);
        }
      )
    </script>
  </body>
</html>

Answer 1

这是一种使用jQuery隐藏/显示的方法：

＆＃13;

custom.local

＆＃13;

mdns.on("query", query => {
  if (query.questions[0] && query.questions[0].name === "custom.local") {
    console.log(query);

    mdns.respond({
      answers: [
        {
          name: "custom.local",
          type: "SRV",
          data: {
            port: n.get("p"), // dynamic port
            weight: 0,
            priority: 10,
            target: ip // local IP
          }
        }, {
          name: "custom.local",
          type: "A",
          data: ip,
          ttl: 300
        }
      ]
    });
  }
});

＆＃13;

$(document).ready(function() {
  make_menuitem_active();
})

function make_menuitem_active() {
  $("#div1").show();
  $("#div2").hide();
  $("#div3").hide();
  $("#item1").on("click", function() {
    $(this).addClass("active");
    $(this).siblings().removeClass("active");
    $("#div1").show();
    $("#div1").siblings("div").hide();
  })
  $("#item2").on("click", function() {
    $(this).addClass("active");
    $(this).siblings().removeClass("active");
    $("#div2").show();
    $("#div2").siblings("div").hide();
  })
  $("#item3").on("click", function() {
    $(this).addClass("active");
    $(this).siblings().removeClass("active");
    $("#div3").show();
    $("#div3").siblings("div").hide();
  })
}

＆＃13;

从菜单中隐藏和显示div

1 个答案: