Question

这是菜单：

<a id="page1" href="" onclick="loadPage('page1')">Home</a>
    <a id="page2" href="" onclick="loadPage('page2')">About us</a>
    <a id="page3" href="" onclick="loadPage('page3')">Services</a>
    <a id="page4" href="" onclick="loadPage('page4')">Partners</a>
    <a id="page5" href="" onclick="loadPage('page5')">Contact us</a>

到目前为止的javascript：

<script>
    var var1="";
    function loadPage(varcontent){
      var1=varcontent;
      alert(var1);
    }

    </script>

这里是div：

<div id="page_1" class=welcome_bye_holder>
      <h1 id="page_1">Welcome to Cyber Technician:</h1>
      <p1 id="page_1">An I.T. Technician and cyber security<br> for the         <br>Southport, North Sefton area.</p1>
    </div>

所以我基本上需要的是除了page1 == document.GetElemenyById =＆＃34; page_1＆＃34;之外的一些javascript除去div以及其中的内容。我能找到的最好的是var elem = document.getElementById（＆＃34; myDiv＆＃34;）; elem.parentNode.removeChild（ELEM）;根据我的理解，它只删除内容而不删除div，除非我弄错了。

Answer 1

我改变了你的html结构。也许它更容易理解。

也许JQ代码可以简化，但我赶时间写了。这是一个例外：

每个a都有data-target，对应div。因此，当您点击a时，检查div是否有id。 div仍然显示，其他div被隐藏。

我想到了3种方法。

使用hide()和show()

解决方案A。

＆＃13;

$("a").on("click",function(){
     var tgtID = $(this).attr("data-target")
     $("div").each(function(){
       if(!$(this).is(tgtID)){
       $(this).hide()
       }else{
       $(this).show()
     }
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <a data-target="#page_1" href="#">Home</a>
    <a data-target="#page_2" href="#" >About us</a>
    <a data-target="#page_3"  href="#">Services</a>
    <a data-target="#page_4"  href="#">Partners</a>
    <a data-target="#page_5" href="#" >Contact us</a>
    
    <div id="page_1" class=welcome_bye_holder>
      <h1 id="page_1">Welcome to Cyber Technician:</h1>
      <p1 id="page_1">An I.T. Technician and cyber security<br> for the         <br>Southport, North Sefton area.</p1>
    </div>
    <div id="page_2" class=welcome_bye_holder>
      <h1 id="page_2">PAGE 2</h1>
      <p1 id="page_2">I PAGE 2 <br /> I PAGE 2</p1>
    </div>

＆＃13;

解决方案B 另一种解决方案是使用addClass()和removeClass()来切换您设置的css中隐藏div {{1}的类hideme }。请参阅下面的代码段

＆＃13;

.hideme { display:none;}

＆＃13;

$("a").on("click",function(){
     var tgtID = $(this).attr("data-target")
     $("div").each(function(){
       if(!$(this).is(tgtID)){
       $(this).addClass("hideme")
     } else {
      $(this).removeClass("hideme")
     }
      
   
  })
    })

＆＃13;

.hideme {
  display:none;
}

＆＃13;

解决方案C 使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a data-target="#page_1" href="#">Home</a> <a data-target="#page_2" href="#" >About us</a> <a data-target="#page_3" href="#">Services</a> <a data-target="#page_4" href="#">Partners</a> <a data-target="#page_5" href="#" >Contact us</a> <div id="page_1" class=welcome_bye_holder> <h1 id="page_1">Welcome to Cyber Technician:</h1> <p1 id="page_1">An I.T. Technician and cyber security<br> for the <br>Southport, North Sefton area.</p1> </div> <div id="page_2" class=welcome_bye_holder> <h1 id="page_2">PAGE 2</h1> <p1 id="page_2">I PAGE 2 <br /> I PAGE 2</p1> </div>和slideUp()，它工作更顺畅，更好。也许你更喜欢它。

请参阅下面的代码段

＆＃13;

slideDown()

＆＃13;

$("a").on("click",function(){
     var tgtID = $(this).attr("data-target")
     $("div").each(function(){
       if(!$(this).is(tgtID)){
         $(this).slideUp()
       }else{
         $(this).slideDown()
      
     }
  })
    })

＆＃13;

解决方案C.1 如果您希望在页面加载时隐藏所有div，并且在您单击<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a data-target="#page_1" href="#">Home</a> <a data-target="#page_2" href="#" >About us</a> <a data-target="#page_3" href="#">Services</a> <a data-target="#page_4" href="#">Partners</a> <a data-target="#page_5" href="#" >Contact us</a> <div id="page_1" class=welcome_bye_holder> <h1 id="page_1">Welcome to Cyber Technician:</h1> <p1 id="page_1">An I.T. Technician and cyber security<br> for the <br>Southport, North Sefton area.</p1> </div> <div id="page_2" class=welcome_bye_holder> <h1 id="page_2">PAGE 2</h1> <p1 id="page_2">I PAGE 2 <br /> I PAGE 2</p1> </div> <div id="page_3" class=welcome_bye_holder> <h1 id="page_3">PAGE 3</h1> <p1 id="page_3">I PAGE 3 <br /> I PAGE 3</p1> </div> <div id="page_4" class=welcome_bye_holder> <h1 id="page_4">PAGE 4</h1> <p1 id="page_4">I PAGE 4 <br /> I PAGE 4</p1> </div> <div id="page_5" class=welcome_bye_holder> <h1 id="page_5">PAGE 5</h1> <p1 id="page_5">I PAGE 5 <br /> I PAGE 5</p1> </div>后仅显示一个div，请使用此

＆＃13;

$('div').hide()
$("a").on("click",function(){
     var tgtID = $(this).attr("data-target")
     $("div").each(function(){
       if($(this).is(tgtID)){
  $(this).slideDown()
       }else{
         $(this).slideUp()
         }
  })
    })

＆＃13;

如果这3个解决方案中的一个适合您，请告诉我

Answer 2

如果您想删除特定元素或将其显示设置为无，我仍然无法理解您的标题。我在下面的例子中做了两个案例。

P.S：我修改了你的HTML代码。两个相同的身份都不好......

var elem = document.getElementById("page_0");

function myfunction(){
  
elem.parentNode.removeChild(elem); 
}

function yourfunction(){

elem.style.display = "none"; 
}

<div id="page_A" class="welcome_bye_holder">
      <h1 id="h1_page_A">Plain, simple title: </h1>
      <p id="p_sub_page_A"> Plain, simple, not importan text.</p>
    </div>
<div id="page_0" class="welcome_bye_holder">
      <h1 id="page_1">Welcome to Cyber Technician:</h1>
      <p id="page_2">An I.T. Technician and cyber security<br> for the         <br>Southport, North Sefton area.</p>
    </div>
<div id="page_X" class="welcome_bye_holder">
      <h1 id="h1_page_X">SOME H1 title:</h1>
      <p id="p_page_X"> some random text,nothing important.</p>
    </div>
<button onclick="myfunction()">remove me!</button>
<button onclick="yourfunction()">hide me!</button>

Answer 3

您可以使用css隐藏它，

<div style="display:none">
<h1> Show/Hide content here
</div>

然后使用JavaScript来显示它。请参阅this

如何从显示中删除div

3 个答案: