jQuery UI Tabs + AJAX + Colorbox

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/jquery.colorbox.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/example1/colorbox.css">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a>
        </li>
        <li><a href="#tabs-2">Tab 2</a>
        </li>
        <li><a href="#tabs-3">Tab 3</a>
        </li>
    </ul>
    <div id="tabs-1">
        <p>Content for Tab 1</p>
    </div>
    <div id="tabs-2">
        <p><a href="http://en.wikipedia.org/" class="colorbox">Wikipedia</p>
    </div>
    <div id="tabs-3">
        <p><a href="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Los_Angeles_%28California%2C_USA%29%2C_Union_Station_--_2012_--_4938.jpg/1920px-Los_Angeles_%28California%2C_USA%29%2C_Union_Station_--_2012_--_4938.jpg" class="colorbox">Los Angeles</a></p>
    </div>
</div>

CSS

#tabs {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

JavaScript

$("#tabs").tabs({
    activate: function (event, ui) {
        $("#tabs .colorbox").colorbox({iframe:true, width:"65%", height:"80%"});
    }
}
);