CODEWITHSUNDEEP
javascriptjqueryhtmlcssbootstrap-4
sumit saini
sumit saini

Reputation: 1

How to add link in tabs in Bootstrap?

I want to create a link in a Bootstrap tab. I have 3 tabs and I want one of them where I will click and a new page will be opened. Please let me know how I can do it.

Here is my HTML code.

<li><a data-toggle="tab" href="google.com" id="btnRent" style="background: #f4762a;">Rent/Lease/PG/Shop</a></li>

And I am using this jQuery...

<script type="text/javascript">
$(document).ready(function()
{
    $(#btnRent).click(function()
    {
        var go_to_url = "www.google.com";
        document.location.href = go_to_url;
    });
});
</script>

But it's not working. I want to open a new page when someone clicks on the "Rent/Lease/PG/Shop" tab.

Upvotes: 0

Views: 115

Answers (3)

henriquezc
henriquezc

Reputation: 21

The best way to do this is to create another "" element inside your tab "

  • "

    <ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a><a href="http://www.google.com>Click here</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

    If you want a direct click just do this

    <ul class="nav nav-tabs">
  <li><a href="http://www.google.com>Click here</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

    Upvotes: 0

    • Tom Lima
    Tom Lima

    Reputation: 1056

    you don't need javascript for that, just use the target parameter inside your 'a' tag like this:

        <li><a data-toggle="tab" href="https://google.com" target="_blank" id="btnRent" style="background: #f4762a;">Rent/Lease/PG/Shop</a></li>

    Upvotes: 0

    DevPro
    DevPro

    Reputation: 511

    you can try inside your click function:

     window.location = url;

    or window.open(url);

    it should do the trick..

    Upvotes: 1

    Related Questions