CODEWITHSUNDEEP
jquerytwitter-bootstrap
felix001
felix001

Reputation: 16711

Bootstrap nav.pills issue

I have the following code for some nav pills within my homepage,

   <div class="menu row-fluid text-center">
            <div class="span12">
                <ul class="nav nav-pills center-pills">
                    <li><a href='/report/' data-toggle="tab">Report</a></li>
                    <li><a href='/cachecheck/' data-toggle="tab">CacheCheck</a></li>
                    <li><a href='/lookup/' data-toggle="tab">Lookup</a></li>
                </ul>
            </div>

However when I click on one of the links I get the error,

Error: Syntax error, unrecognized expression: /report/

... and it doesnt take me to the link. Am I missing something simple here ?

Upvotes: 1

Views: 621

Answers (2)

absqueued
absqueued

Reputation: 3063

As much as I know, you have to use the href value with # (pound) sign following with id.

            <div class="span12">
                <ul class="nav nav-pills center-pills">
                    <li><a href='#report' data-toggle="tab">Report</a></li>
                    <li><a href='#cachecheck' data-toggle="tab">CacheCheck</a></li>
                    <li><a href='#lookup' data-toggle="tab">Lookup</a></li>
                </ul>
            </div>

See here: http://jsfiddle.net/Pu6jJ/

EDIT (based on conversation below:)

If you wanted to have only styles, not the tab functionality - remove the data-toggle attribute.

            <div class="span12">
                <ul class="nav nav-pills center-pills">
                    <li><a href='/report/'>Report</a></li>
                    <li><a href='/cachecheck/' >CacheCheck</a></li>
                    <li><a href='/lookup/'>Lookup</a></li>
                </ul>
            </div>

That's all!

Upvotes: 1

tomaroo
tomaroo

Reputation: 2534

Because you have data-toggle="tab" in your links, bootstrap thinks these are tab headers for a tabbed display, and that the href's you give are ID's of the tab pane to show.

Remove data-toggle="tab" from your links.

Upvotes: 1

Related Questions