ナビゲーションで2つのオプション、ラジオの男性または女性を使用

Question

maleF.htmlまたはfemaleF.htmlにリンクする代わりにナビゲーションのためにマウスを動かすと、私のimg写真が保存されているフォルダ名が開きます。すべての

ラジオ男性女性

<form style="padding-top:0px"> 
    <input type="text" name="search" oninput="myFunction()" placeholder="Search"> 
    <input type="radio" name="gender" value="male"> Male 
    <input type="radio" name="gender" value="female"> Female 

    </form> 

ナビゲーション

<div class = "dropdown" width = "10"> 
    <button class="dropbtn">Clothing</button> 
    <div class="dropdown-content"> 
     <a id="formal" href="#formal">Formal</a></br> 
     <a id="maleFormal" style="display:none" href="maleaF.html">Male Formal</a> 
     <a id="femaleFormal" style="display:none" href="formalF.html">Female Formal</a> 
      <a href="#tshirt">Tshirt</a></br> 
      <a href="#jeans">Jeans</a></br> 
      <a href="#skirts">Skirts</a></br> 
      <a href="#shorts">Shorts</a></br> 
    </div> 
</div> 

javascriptの

<script> 
$(document).on('click','#male',function(){ // this is to fitch male html. script 
$("#formal").hide(); 
$("#maleFormal").hide(); 
$("#femaleFormal").show(); 
}); 
$(document).on('click','#female',function(){ // this is fitch female.html script 
    $("#formal").hide(); 
    $("#maleaFormal").hide(); 
    $("#femaleFormal").show(); 
       }); 
</script> 

Answer 1

まず、PLE ASEラジオボタン内部の「男性」と「女性」id属性を追加します。

<input type="radio" id="male" name="gender" value="male"> Male 
<input type="radio" id="female" name="gender" value="female"> Female 

次に、このような何かにあなたのjqueryのコードを変更：

<script> 
$(document).ready(function(){ 
    $("#male").click(function(){ // this is to fitch male html. script 
     $("#formal").hide(); 
     $("#maleFormal").show(); 
     $("#femaleFormal").hide(); 
    }); 
    $("#female").click(function(){ // this is fitch female.html script 
     $("#formal").hide(); 
     $("#maleaFormal").hide(); 
     $("#femaleFormal").show(); 
    }); 
}); 
</script>