jQuery on click of main nav item, change different element on page

Question

I created a menu so when the user hovers over a main menu item, a feature image below the menu will change. This works. I set up similar jQuery to accommodate touchscreens using click rather than hover, and this does not work.

The gist of my code... First I test if a touch device. If yes,

    jQuery(document).ready(function(){
        jQuery('.menu-item-1').on('click', function(){
            jQuery('#feature-image').attr('src', 'http://jdaviswebdesign.com/education/wp-content/uploads/menu-image1.jpg');
        });
        jQuery('.menu-item-2').on('click', function(){
            jQuery('#feature-image').attr('src', 'http://jdaviswebdesign.com/education/wp-content/uploads/menu-image2.jpg');
        });            
        ...repeated for each main menu li

I created a dummy page that can be viewed here (http://www.jdaviswebdesign.com/menu.html). The dummy page includes the CSS, jQuery, and HTML.

Any help or ideas would be much appreciated. I have tried every combination of writing the click function to no avail.

score 0 · Answer 1 · edited May 23 '17 at 12:16

Yeah you are right touch screen will not detect hover event but you know you can use jQuery .bind('touchstart touchend', function(){}); to fire your event , However it's better to first detect touch screen device. try like this to detect touch screen it work for me.

function is_touch_device() {
  return 'ontouchstart' in window        // works on most browsers 
      || navigator.maxTouchPoints;       // works on IE10/11 and Surface
};
if( is_touch_device() ) {
        alert("Touch Device");
}

Source https://stackoverflow.com/a/4819886/3967385

jQuery on click of main nav item, change different element on page

1 Answers1