Comment puis-je faire ensemble bootstrap panneau de lien hypertexte

suis en utilisant twitter bootstrap du composant du panneau. j'ai ci-dessous le code

<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>

comment puis-je faire de tout le groupe en tant que lien hypertexte. comme je devrais être en mesure de cliquer sur n'importe quelle partie du groupe et il doit naviguer vers une autre page.

En ligne montrent les exemples faisant le pied de page que le lien hypertexte, mais j'ai pensé que ce serait mieux si je peux faire l'ensemble du groupe un lien hypertexte.

je ne veux pas utiliser metro.js.

Grâce.

OriginalL'auteur user1447718 | 2013-12-04

  1. 12

    Juste envelopper l'ensemble du panneau dans une balise d'ancrage.

     <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>
    Absolument, cela semble être la bonne solution. @les personnes âgées, une raison pour laquelle ce n'est pas le cas?
    Je l'ai fait à travers le panneau et il sali la mise en page. Je l'ai essayé sur un élément à l'intérieur du panneau et il a bien fonctionné.
    Ma première hypothèse serait que <a> balises sont des éléments inline par défaut, ce qui peut être la raison pour laquelle il a foiré la mise en page. Devrait être assez simple CSS de fixer, si vous regardez dans les. Mon seul souci avec pas habillage de l'ensemble du groupe à l'intérieur de la balise d'ancrage est que certaines parties du panneau ne peut pas être cliquable ie. suivez le lien si chaque élément est enroulé autour.
    Je ne me souviens pas le projet que j'ai été bricoler avec, mais en changeant l'ordre des balises résolu le problème pour moi. J'ai cherché à éviter primordial Bootstrap CSS paramètres, comme je n'aime pas me souvenir de ce que j'ai fait quelque chose de plus bas de la ligne.
    ici est une autre solution de travail, sans aucune modification. espoir aide.

    OriginalL'auteur Alan Thomas

  2. 1

    À l'aide d'une balise d'ancrage autour de l'élément peut gâcher certaines dispositions en raison de l'ancêtre des sélecteurs dans la feuille de style.

    À l'aide d'une balise d'ancrage que le groupe spécial lui-même ne peut pas hériter de la valeur par défaut du panneau styles.

    La solution la plus simple avec le javascript est de mettre un attribut sur le panneau de div, comme href ou data-href, puis un événement mondial à l'écoute (délégué).

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

    OriginalL'auteur stephenr85

  3. 0

    Essayer

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

    Ou panneau de réglage de l'id de

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


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

    Pour .NET MVC 3 ou 4 :

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

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

    DÉMO : La page ne permet pas de naviguer, mais vous pouvez voir un exemple complet

    Salut, merci pour la réponse. au lieu d'utiliser l'adresse http:// de l'adresse, je veux utiliser >@Html.ActionLink("Ma file d'attente", "Index", "tableau de bord", null, null). de toute façon je peux réaliser cela?
    Salut, je suppose que vous utilisez .net mvc 3 ou 4. Dans ce cas, essayez avec la mise à Jour
    la démo ne fonctionne pas.
    Re-Ajouté sur jsfiddle

    OriginalL'auteur Mate