Question

I’m having an issue with jQuery UI Tabs script which does not pick up tabs that have a dot “.” in their name (ID).

For instance like this:

<script type="text/javascript">
    $(function () {
        $("#tabgroup\\.services").tabs();
    });
</script>

<div id="tabgroup.Services">
    <ul>

        <li><a href="#tab.service1">
            Service 1 title</a></li>

        <li><a href="#tab.service2">
            Service 2 title</a></li>

    </ul>

<div id="tab.service1">
    <p>content</p>
</div>

<div id="tab.service2">
    <p>content</p>
</div>

</div>

The problem is because to select an element with a dot in its name, you need to use escapes (like when I initialize the tabs on my tabgroup). And apparently the Tabs JS implementation does not do that. Although I can do it at the tab group level, I cannot do it lower down because that’s implemented in the Tabs JS file and I would not want to modify it (if possible).

Answer 1

If you escape it in the hashes on the links it’ll work, like this:

<div id="tabgroup.services">
<ul>
    <li><a href="#tab\.service1">
        Service 1 title</a></li>
    <li><a href="#tab\.service2">
        Service 2 title</a></li>
</ul>
<div id="tab.service1">
    <p>content</p>
</div>
<div id="tab.service2">
    <p>content</p>
</div>
</div>​

This works because it uses the anchor’s hash as the selector for the tab, so you just need a selector that works to find the tab you want. You can see a working example here