Как сделать всю загрузочную панель гиперссылкой

am с использованием компонента панели 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.

Спасибо.

Ответ 1

Просто оберните всю панель в тег привязки.

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

Ответ 2

Try

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

Или установка идентификатора панели

       <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: страница не позволяет перемещаться, но вы можете увидеть полный пример

Ответ 3

Использование метки привязки вокруг элемента может испортить некоторые макеты из-за селекторов предков в таблице стилей.

Использование тега привязки как сама панель также может не наследоваться от стилей панели по умолчанию.

Самое простое решение с javascript - поместить атрибут на панель div, например href или data-href, затем глобальный прослушиватель событий (delegate).

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