web-dev-qa-db-fra.com

Comment puis-je créer un panneau de démarrage complet en tant que lien hypertexte

j'utilise le composant du panneau de bootstrap de Twitter. 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 le panneau entier comme hyperlien. comme je devrais pouvoir cliquer sur n’importe quelle partie du panneau et il devrait naviguer vers une autre page.

Les exemples en ligne montrent que le pied de page est un lien hypertexte, mais j’ai pensé que ce serait mieux si je pouvais transformer tout le panneau en lien hypertexte.

je ne veux pas utiliser metro.js.

Merci.

twitter-bootstraphyperlinkpanel
12
user1447718

Enroulez simplement le panneau entier dans une étiquette 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>
13
Alan Thomas

L'utilisation d'une balise d'ancrage autour de l'élément peut gâcher certaines mises en page en raison des sélecteurs d'ancêtres dans la feuille de style.

L'utilisation d'une balise d'ancrage en tant que panneau lui-même peut également ne pas hériter des styles de panneau par défaut.

La solution la plus simple avec javascript est de mettre un attribut sur le panneau div, comme href ou data-href, puis un écouteur d'événement global ( delegate ).

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

Essayer

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

Ou configuration de l'id du panneau

       <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;
        });

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

0
Mate