javascript - How to make onClick do the same thing as Hover on <li> tag -

i have css image gallery 3 tabs , images displayed while hovering on thumbnails in each tab. check snippet or webpage http://www.abavela.com/en/charter-sailing-yacht-bavaria-36-1.htm

problem when click on thumbnail browser loads jpg , displayed in gallery hover event does. problematic on touch screens. onclick event "li" tag same thing hover event.

i guess can not done css alone need javascript code. tried active, focus, target in css , bunch of options in javascript no real success.

any welcomed.

a {    color: #000;  }  a:hover {    text-decoration: none;  }  a:visited {    color: #000;  }  .photo {    width: 744px;    position: relative;    height: 534px;    float: left;    /* [disabled]margin-bottom: -10px; */  }  .photo ul.topic {    padding: 0;    margin: 0;    list-style: none;    width: 744px;    height: 30px;    position: relative;    z-index: 10;  }  .photo ul.topic li {    display: block;    width: 247px;    height: 30px;    float: left;  }  .photo ul.topic li a.set {    display: block;    font-size: 11px;    width: 247px;    height: 30px;    text-align: center;    line-height: 30px;    color: #999;    text-decoration: none;    border: 1px solid #aaa;    border-width: 1px 1px 0 1px;    background: #e7e7e7;    font-family: verdana, arial, sans-serif;    border-radius: 10px 10px 0px 0px;    font-weight: bold;  }  .photo ul.topic li ul,  .photo ul.topic li ul {    display: none;  }  .photo ul.topic li.active {    color: #999;    background: #e7e7e7;  }  .photo ul.topic li a:hover,  .photo ul.topic li:hover {    color: #ffffff;    background: #ccc;  }  .photo ul.topic li.active ul {    display: block;    position: absolute;    left: 0px;    /* [disabled]top: 32px; */    list-style: none;    padding: 0px 0px;    margin: 0;    height: 496px;    background: #ddd;    width: 741px;    border: 1px solid #bbb;    z-index: 1;  }  .photo ul.topic li a:hover ul,  .photo ul.topic li:hover ul {    display: block;    position: absolute;    left: 0;    top: 31px;    list-style: none;    padding: 0;    margin: 0;    height: 496px;    background: #ddd;    width: 741px;    padding: 0px 0px;    border: 1px solid #aaa;    z-index: 100;  }  .photo ul.topic li ul li {    display: inline;    width: 147px;    height: 78px;    float: left;    border: 0px solid #fff;    margin: 0px;  }  .photo ul.topic li ul li {    display: block;    width: 147px;    height: 83px;    cursor: inherit;    float: left;    text-decoration: none;    background: #444;    border: 0px solid #888;  }  .photo ul.topic li ul li img {    display: block;    width: 147px;    height: 75px;    border: 2px solid #eee;  }  .photo ul.topic li a:hover ul li a:hover img,  .photo ul.topic li:hover ul li a:hover img {    position: absolute;    left: 0px;    top: 78px;    width: 735px;    height: 413px;    border-color: #eee;  }  .slikagalerry {    border: 2px solid #eee;  }

<div class="photo">    <ul class="topic">      <li><a class="set" href="#exterier">exterior</a>        <!--[if gte ie 7]><!-->        <!--<![endif]-->        <!--[if lte ie 6]><table><tr><td><![endif]-->        <ul>          <li>            <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-prova.jpg">              <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-prova.jpg" width="735" height="413" alt="bavaria 36" title="">            </a>          </li>          <li>            <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-bok.jpg">              <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-bok.jpg" width="735" height="413" alt="bavaria 36" title="">            </a>          </li>          <li>            <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-kabina.jpg">              <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-kabina.jpg" width="735" height="413" alt="bavaria 36" title="">            </a>          </li>          <li>            <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-kokpit.jpg">              <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-kokpit.jpg" width="735" height="413" alt="bavaria 36" title="">            </a>          </li>          <li>            <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-krma.jpg">              <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-krma.jpg" width="735" height="413" alt="bavaria 36" title="">            </a>          </li>          <li>            <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-krma.jpg" width="735" height="413" alt="bavaria 36" title="" class="slikagalerry">          </li>        </ul>        <!--[if lte ie 6]></td></tr></table></a><![endif]-->      </li>        <li class="active"><a class="set" href="#interier">interior</a>        <!--[if gte ie 7]><!-->        <!--<![endif]-->        <!--[if lte ie 6]><table><tr><td><![endif]-->        <ul>          <li>            <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-prova.jpg">              <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-prova.jpg" width="735" height="413" alt="bavaria 36" title="">            </a>          </li>          <li>            <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-ndesk.jpg">              <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-ndesk.jpg" width="735" height="413" alt="bavaria 36" title="">            </a>          </li>          <li>            <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-kuhinja.jpg">              <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-kuhinja.jpg" width="735" height="413" alt="bavaria 36" title="">            </a>          </li>          <li>            <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-wc.jpg">              <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-wc.jpg" width="735" height="413" alt="bavaria 36" title="">            </a>          </li>          <li>            <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-krma.jpg">              <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-krma.jpg" width="735" height="413" alt="bavaria 36" title="">            </a>          </li>          <li>            <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-salon.jpg" width="735" height="413" alt="bavaria 36" title="" class="slikagalerry">          </li>        </ul>        <!--[if lte ie 6]></td></tr></table></a><![endif]-->      </li>      <li><a class="set" href="#inaction">in action</a>        <!--[if gte ie 7]><!-->        <!--<![endif]-->        <!--[if lte ie 6]><table><tr><td><![endif]-->        <ul>          <li>            <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-1.jpg">              <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-1.jpg" width="735" height="413" alt="bavaria 36" title="">            </a>          </li>          <li>            <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-2.jpg">              <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-2.jpg" width="735" height="413" alt="bavaria 36" title="">            </a>          </li>          <li>            <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-3.jpg">              <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-3.jpg" width="735" height="413" alt="bavaria 36" title="">            </a>          </li>          <li>            <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-4.jpg">              <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-4.jpg" width="735" height="413" alt="bavaria 36" title="">            </a>          </li>          <li>            <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-1.jpg">              <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-1.jpg" width="735" height="413" alt="bavaria 36" title="">            </a>          </li>          <li>            <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-1.jpg" width="735" height="413" alt="bavaria 36" title="" class="slikagalerry">          </li>          </ul>        <!--[if lte ie 6]></td></tr></table></a><![endif]-->        </li>        </ul>    <br class="clear" />  </div>

this should work if want prevent jpg opening on click.

<script type='text/javascript'>     $(".photo ul li").click(function(e){e.preventdefault()}) </script>