2016-10-27 9 views
0

ここに私のコードです。あなたが見ることができるように、別のセクションにリダイレクトするアンカーのリストグループ(ここではコードをテストするためにTwitterアドレスに変更されています)と、内部リンクを持つ最後のドロップダウンメニューもあります。あなたもcheck it in bootplyすることができます。ご覧のとおり、リンクは機能していません。私がドロップダウンメニューを取り出しても、それはまだ動作しません。それは何もしません、なぜ私は無知です。 @MoshFeuと@almostabeginnerとしてブートストラップリストグループ内のリンクが機能しない

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<style> 
 
    .list-group.panel > .list-group-item { 
 
    border-bottom-right-radius: 4px; 
 
    border-bottom-left-radius: 4px 
 
    } 
 
    .list-group-submenu { 
 
    margin-left:20px; 
 
    } 
 
</style> 
 
<div class="list-group"> 
 
    <a href="http://twitter.com" class="list-group-item list-group-item-action disabled" id="10_2016" target="_blank"> 
 
    October 2016 
 
    <span class="badge" data-toggle="tooltip" data-container="body" data-original-title="Active news">0</span> 
 
    <span class="badge badge-gray pull-right" data-toggle="tooltip" data-container="body" data-original-title="Inactive news">0</span> 
 
    </a> 
 
    <a href="http://twitter.com" class="list-group-item list-group-item-action" id="9_2016" target="_blank"> 
 
    September 2016 
 
    <span class="badge" data-toggle="tooltip" data-container="body" data-original-title="Active news">2</span> 
 
    <span class="badge badge-gray pull-right" data-toggle="tooltip" data-container="body" data-original-title="Inactive news">0</span> 
 
    </a> 
 
    <!-- Here go more months --> 
 
    <a aria-expanded="true" href="#SubMenu1" class="list-group-item active" data-toggle="collapse" data-parent="#SubMenu1"> 
 
    Historic <i class="fa fa-caret-down"></i> 
 
    <span class="badge">1</span> 
 
    </a> 
 
    <div aria-expanded="true" style="" class="list-group-submenu collapse in" id="SubMenu1"> 
 
    <a href="http://twitter.com" class="list-group-item active" data-parent="#SubMenu1" target="_blank"> 
 
     2015 
 
     <span class="badge">1</span> 
 
    </a> 
 
    <!-- Here go more years --> 
 
    </div> 
 
</div>

、コメント内のコードの作品を​​証明しているが、それは私のプロジェクトでは動作しません。ここでは、このコードの環境と私が試したことの詳細をいくつか追加します: プロジェクトはPHPです.HTMLはクラス内の関数で準備され、ブートストラップの列と行の中にエコーされます。私は、パスが悪くないことを確認するために、Twitter URLでhrefの内部URLを変更しました。私はそのページではほとんど起こっていません。コンソールでは、誤った形式のHTMLやjsエラーは表示されません。そのページにはいくつかの特定のスタイルがありますが、リンクについての唯一のスタイルは色に関するものです。だから私は他に何ができるか分からない。

+1

それは私のために働く:http://output.jsbin.com/yuqozuxedo –

答えて

1

target="_blank"を設定しているため、その行を削除しても問題ないと思います。

http://www.bootply.com/VX0dtnLSbF

明らかにbootply新しいウィンドウを許可していません、私はbootplyで

onclick="window.open(this.href,'_blank');return false;" 

を試みたが、それはまだ動作しますが、リンクが機能しませんでした。

JSをデバッグしたい場合は、Chromeの「検査」機能を使用することをおすすめします。これにより、簡単に作業できます。

編集、追加する:

をこれはあなたがTwitterのリンクをクリックしたときに、あなたが得るメッセージです: 祖先は、次のコンテンツセキュリティポリシーに違反するため

は、フレーム内の「https://twitter.com/」を表示することを拒否ディレクティブ: "frame-ancestors 'self'"

簡単に言えば、bootplyは許可しません。それ以外の場合、リンクは完全に正常に動作しています。

+1

それは 'target =" _ blank "で私のために働く:http://output.jsbin.com/yuqozuxedo –

+0

私はしない彼がコードをテストしている場所を知っていますが、彼が与えたbootplyの例では、target = "_ blank"が問題でした。はい、あなたが正しいです、それはtarget = "_ blank"でも有効です –

+1

これらのツールはすべてiframeで出力を実行するため、はいです。 –

1

これは、愚かなインクルードファイルの愚かなe.preventdefaultでした。申し訳ありませんが、これであなたの時間を無駄にしました!

関連する問題