How do i make entire bootstrap panel as hyperlink

user_1447718 0
Viewed 21101

am using twitter bootstrap's panel component. i have below 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>

how do i make the entire panel as hyperlink. like i should be able to click on any part of the panel and it should navigate to a different page.

Online examples show making the footer as hyperlink, but i thought it would be better if i can make the entire panel a hyperlink.

i don't want to use metro.js.

Thanks.

twitter-bootstrap hyperlink panel
3 Answers

Try

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

Or setting panel's id

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


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

For .NET MVC 3 or 4 :

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

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

DEMO : The page doesn't allow navigate, but you can see a full example

user_8952790
Related