Div Tabs extra button help

Div Tabs extra button help

I am trying to add a button outside of a tab area that will switch the tabs to the new tab by clicking an out side button. Current code is below. I want to click on part of a diagram and the tabs will switch to that tab.

Is this possible to do? Is there a tutorial out there to help me...

  1. <head>
        <meta charset="utf-8" />
        <title>jQuery UI Tabs - Default functionality</title>
        <link rel="stylesheet" href="css/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <script>
          $(function() {
            $( "#tabs" ).tabs();
          });
        </script>
    </head>
    <body>
         <a id="tabs-1">Click Softly</a>
        <script>
            document.getElementById('tabs-1').onclick = function() { $( "#tabs" ).tabs(); }
        </script>
    <div id="tabs" style="width: 50%;">

        <p style="text-align:center;"> <img src="cyber_venn.png" /> </p>

        <ul>
            <li><a href="#tabs-1">Tab 1 - Red</a></li>
            <li><a href="#tabs-2">Tab 2 - Blue</a></li>
            <li><a href="#tabs-3">Tab 3 - Green</a></li>
        </ul>
        <div id="tabs-1">
            <p>Red - Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. </p>
        </div>
        <div id="tabs-2">
            <p>Blue - Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. </p>
        </div>
        <div id="tabs-3">
            <p>Green - Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante.</p>
           
        </div>
       
    </div>