iframeターゲットを変更して1つのボタンからターゲットdivを閉じる

私が達成しようとしているのは、Div 1をクリックしたときにメニューがスライドしてWeb 1を選択したときに、メニューが閉じ、iframeが変更されます。iframeターゲットを変更して1つのボタンからターゲットdivを閉じる

現在のところ、メニューを非表示にするかiframeを変更するだけではなく、両方では機能しません。

iframeの変更を示すために2番目の「Div 2」を追加しました。

<html> 
 
<head> 
 
    <script src="https://code.jquery.com/jquery-3.2.0.js" integrity="sha256-wPFJNIFlVY49B+CuAIrDr932XSb6Jk3J1M22M3E2ylQ=" crossorigin="anonymous"></script> 
 
    <style> 
 
    .targetDiv { 
 
     display: none; 
 
     background-color: red; 
 
     width: 200px; 
 
     height: 100px; 
 
     display: none; 
 
     position: absolute; 
 
     left: 10px; 
 
     top: 50px; 
 
    } 
 
    
 
    .iframe { 
 
     bottom: 0px; 
 
     left: 0px; 
 
     position: absolute; 
 
     width: 500px; 
 
     height: 500px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div> 
 
    <a class="showSingle">Div 1</a> 
 
    </div> 
 
    <div> 
 
    <a class="showSingle">Div 2</a> 
 
    </div> 
 
    <div class="targetDiv"> 
 
    <a href="http://www.skysports.com/" class="showSingle" target="myiframe">Web 1</a> 
 
    </div> 
 
    <div class="targetDiv"> 
 
    <a href="http://www.bbc.co.uk/news" target="myiframe">Web 2</a> 
 
    </div> 
 

 
    <iframe src="http://www.bing.com/" name="myiframe" class="iframe"></iframe> 
 
</body> 
 

 
</html> 
 
<script> 
 
    jQuery(function() { 
 
    jQuery('.showSingle').click(function() { 
 
     var index = $(this).parent().index(), 
 
     newTarget = jQuery('.targetDiv').eq(index); 
 
     jQuery('.targetDiv').not(newTarget).slideUp('fast') 
 
     newTarget.delay('fast').slideToggle('fast') 
 
     return false; 
 
    }) 
 
    });; 
 
</script>

出典

2017-03-21 JDCov87

あなたの質問は不明であるが、迅速な解決がされる追加する 'クラス= "showSingleは、"' 'テキストWeb2'を持つ' A'に、あなたはそれを忘れてしまいました。 – rmalviya

あなたのiframeは、あなたのdivをブロックし、私はそれのスタイルを変えました。

"a"タグのクラスは "showSingle"にする必要があります。それを取り除いた後、すべてが機能します。

$(function() { 
 
    $('.showSingle').click(function() { 
 
    var index = $(this).parent().index(); 
 
    console.log(index); 
 
    var newTarget = $('.targetDiv').eq(index); 
 
    $('.targetDiv').not(newTarget).slideUp('fast') 
 
    newTarget.delay('fast').slideToggle('fast') 
 
    return false; 
 
    }); 
 
    $(".targetDiv a").click(function() { 
 
    $('.targetDiv').slideUp('fast') 
 
    }); 
 
});

.targetDiv { 
 
    display: none; 
 
    background-color: red; 
 
    width: 200px; 
 
    height: 100px; 
 
    display: none; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 50px; 
 
} 
 

 
.iframe { 
 
    bottom: 0px; 
 
    left: 0px; 
 
    top: 100px; 
 
    position: absolute; 
 
    width: 500px; 
 
    height: 500px; 
 
}

<script src="https://code.jquery.com/jquery-3.2.0.js" integrity="sha256-wPFJNIFlVY49B+CuAIrDr932XSb6Jk3J1M22M3E2ylQ=" crossorigin="anonymous"></script> 
 

 
<div> 
 
    <div> 
 
    <a class="showSingle">Div 1</a> 
 
    </div> 
 
    <div> 
 
    <a class="showSingle">Div 2</a> 
 
    </div> 
 
</div> 
 
<div class="targetDiv"> 
 
    <a href="http://www.skysports.com/" target="myiframe">Web 1</a> 
 
</div> 
 
<div class="targetDiv"> 
 
    <a href="http://www.bbc.co.uk/news" target="myiframe">Web 2</a> 
 
</div> 
 

 
<iframe src="http://www.bing.com/" name="myiframe" class="iframe"></iframe>

出典

2017-03-21 11:46:15 blackmiaool

あなたの応答に感謝しますが、私はあなたが誤解していると思います。 Web 1/Web 2をクリックすると、赤いターゲットdivが削除されます。 – JDCov87

答えを更新しました。クリックリスナーをリンクに追加するだけです。 @ JDCov87 – blackmiaool

あなたの助けてくれてありがとうブリリアント@blackmiaool – JDCov87

iframeターゲットを変更して1つのボタンからターゲットdivを閉じる

答えて

関連する問題