web-dev-qa-db-ja.com

bootstrapパネル全体をハイパーリンクとして作成するにはどうすればよいですか？

twitterブートストラップのパネルコンポーネントを使用しています。私は以下のコードを持っています

<div class="panel panel-info">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-6">
                        <i class="fa fa-comments fa-5x"></i>
                    </div>
                    <div class="col-xs-6 text-right">
                        <p class="announcement-text">My queue</p>
                    </div>
                </div>
            </div>
        </div>

パネル全体をハイパーリンクにする方法を教えてください。パネルの任意の部分をクリックして、別のページに移動できるようにする必要があります。

オンラインの例では、フッターをハイパーリンクとして作成することが示されていますが、パネル全体をハイパーリンクにできるとよいと思いました。

私はmetro.jsを使いたくありません。

ありがとう。

twitter-bootstraphyperlinkpanel
12
user1447718

パネル全体をアンカータグで包むだけです。

 <a href="link.com">    
  <div class="panel panel-info">
    <div class="panel-heading">
      <div class="row">
        <div class="col-xs-6">
          <i class="fa fa-comments fa-5x"></i>
        </div>
        <div class="col-xs-6 text-right">
          <p class="announcement-text">My queue</p>
        </div>
      </div>
    </div>
  </div>
</a>
13
Alan Thomas

要素の周りにアンカータグを使用すると、スタイルシートの祖先セレクターが原因で一部のレイアウトが混乱する可能性があります。

パネル自体としてアンカータグを使用しても、デフォルトのパネルスタイルを継承しない場合があります。

Javascriptを使用した最も簡単な解決策は、hrefやdata-hrefなどの属性をパネルdivに配置してから、グローバルイベントリスナー（ delegate ）を配置することです。

 $(document).on('click', '.panel[data-href]:not(a)', function(){
     window.location = $(this).attr('data-href');
 });
1
stephenr85

試してみてください

 $('.panel panel-info').click(function(e) {
        e.preventDefault();
        window.location = 'http://stackoverflow.com/';
    });

またはパネルのIDを設定する

       <div class="panel panel-info" id="lnkPanel">


        $('#lnkPanel').click(function(e) {
            e.preventDefault();
            window.location = 'http://stackoverflow.com/';
        });

.NET MVC 3または4の場合：

<script type="text/javascript">
      var lnkDashboard = '@Url.Action("Index", "Dashboard")';
</script>

  $('#lnkPanel').click(function(e) {
            e.preventDefault();
            window.location = lnkDashboard;
        });

[〜＃〜] demo [〜＃〜] ：ページはナビゲートできませんが、完全な例を見ることができます

0
Mate