"Enhancing user experience with jQuery UI tabs for selecting the best option

Does anyone know how to create jquery ui tabs within a selected option on a mobile version? I am having trouble with this and would appreciate any assistance. My design is responsive, with desktop versions using jquery tabs and the mobile version using select options.

http://jqueryui.com/tabs/

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>tabs-1</p>
  </div>
  <div id="tabs-2">
    <p>tabs-2</p>
  </div>
  <div id="tabs-3">
    <p>tabs-3</p>
  </div>
</div>
jqueryhtmlcssjquery-ui

Answer №1

Check out the revised code below to see how it can assist you:

$(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
$("#mm0").change(function(event) {
//alert();
        event.preventDefault();
var tab_index=$(this).find('option:selected').attr('rel');
//alert(tab_index);
var current_sel_a=$('.tabs-menu li').removeAttr('class');
$('a[href="' + tab_index + '"]').closest("li").addClass("current");
        var tab = $(this).find('option:selected').attr('rel');
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
.tabs-menu {
    height: 30px;
    float: left;
    clear: both;
    margin:0
}

.tabs-menu li {
    height: 30px;
    line-height: 30px;
    float: left;
    margin-right: 10px;
    background-color: #ccc;
    border-top: 1px solid #d4d4d1;
    border-right: 1px solid #d4d4d1;
    border-left: 1px solid #d4d4d1;
    list-style:none
}

.tabs-menu li.current {
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid #fff;
    z-index: 5;
}

.tabs-menu li a {
    padding: 10px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none; 
}

.tabs-menu .current a {
    color: #2e7da3;
}
/* More CSS code here */

</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sorting DIV elements by class name with JavaScript and JQuery

Can anyone assist with organizing the following HTML structure using jQuery? I have: <div id="container"> <div>1</div> <div class="red">2</div> <div class="red">3</div> <div>4</div> ...

jquery

"Utilize jQuery to insert an unordered list within a list item

Can you help me with jQuery implementation? <ul> <li>Home</li> <li>About <ul> <li>About1</li> <li>About2</li> </ul> </li> </ul> He ...

jquery

jQuery UI Tab displays the initial tab

I have an ASP:Button control in tab-2. When I insert something in the database in the onClick method, it returns to the first tab but I want it to stay on the current tab. Also, the page must reload. How can I achieve this? <asp:Button ID="btnAddCont ...

c#jqueryasp.net

Execute scroll to top animation but without utilizing $('html,body').animate({scrollTop: 0}, 'slow')

As someone who is just starting to explore jQuery, I hope you can bear with me. I've implemented this styling: html, body{ height: 100%; overflow: auto; } Along with this script: $(document).ready(function() { $('#guide-wrap'). ...

jquerycssjquery-animatescrolltop

Creating a cell in HTML/CSS with wrapped data

Is there a way to properly wrap data in the table instead of getting a scroll bar when the template name is too long? I would like it to automatically go to the next line. <table class="selectablePreviousOrder dashboard"> <tr ng-class-odd=" ...

htmlcss

invoke the getJson function

I am trying to display the data from my JSON file within a div tag on my HTML page. Below is my jQuery code: $(document).ready(function () { $("#driver").click(function (event) { $.getJSON('data.json', function (em) { ...

jqueryhtmljson

Executing a callback function when a window confirmation is triggered during the onbeforeunload event

Currently, I need to implement a feature where a confirmation window pops up when the user tries to close the page. The code snippet for this functionality is included below: window.onbeforeunload=function(){ if(...) { return "Are you sure you want to ...

javascriptjquerycallbackonbeforeunloadconfirmation

Retrieving a targeted data point from a JSON object

I am working with a json data that contains various properties, but I am only interested in extracting the uniqueIDs. Is there a way to retrieve ONLY the uniqueID values and have them returned to me as a comma separated list, for example: 11111, 22222? (I ...

javascriptjqueryarraysjson

hover-related problems when using bootstrap

I am experiencing an issue where the functionality works properly without using the link to bootsrap.css. <link rel="stylesheet" type="text/css" href="css/bootsrap.css"/> However, when I include this bootstrap link, the mouseover feature stops work ...

phpcsshtmltwitter-bootstrap

Leveraging jQuery to automatically select checkboxes based on user input from another checkbox

I am struggling with a basic implementation of jQuery and need some help. My goal is to have one checkbox automatically checked when another is checked. HTML: <input onchange="toggleRegion()" id="ESARO" type="checkbox" class="region" value="ESARO" na ...

javascriptjquery

Modify the database value linked to an <input> element each time its value is modified

I attempted to create something similar to the example provided here $(document).ready(function(){ $('input[type=text]').keyup(function(){ var c=0; var a=$(this).attr('name'); //a is string //if var a change.. ...

javascriptjquery

utilizing jquery ajax for image uploading with php and mysqli

When trying to upload an image URL using AJAX into the database, I encountered an error upon submitting the form. My goal is to upload the image URL into the database without refreshing the page. The specific error message I received was: GET 400 (Bad Re ...

phpjquerymysqlajax

Issues arise when attempting to affix the navigation bar to the top of the webpage

After running the code below, I noticed that my navbar is not behaving as expected and seems to be stuck in the middle of the screen instead of being fixed to the top. This is confusing for me because I have created navbars before that worked fine. Any ass ...

htmlcssdjangobootstrap-4nav

Ways to retrieve element(s) and delete a specific class located in the DOM structure

This is my first time using stackoverflow and posting a question here! :] Can someone guide me on the best way to write JQuery code for this particular task? Task: My goal is to remove the 'active' CLASS from a nav element when it is active: ...

javascriptjqueryhtmlcssdom

Sending information from tinyMCE text field to PHP using AJAXgetMethod

When I use a TinyMCE 4.0 text field to post HTML data through AJAX, I am encountering an issue where the data doesn't reach the server side properly. In Firefox Firebug, it shows that I have posted this data: attendanceID=&noteID=&Category=2 ...

javascriptphpjqueryajax

Design a menu featuring two additional submenus

I'm having trouble with the second sub-menu in this menu. It doesn't open the second sub-menu item. What can I do? <div id='cssmenu'> <ul> <li class='active'><a ...

jqueryhtmlcss

Different div elements are clashing with each other when it comes to hiding and

Having added multiple div elements with different IDs, I am facing an issue where clicking one div displays it while hiding the others. I am looking for a solution to prevent conflicts between the divs. Any suggestions on what might be causing this problem ...

javascripthtmljquerycss

The contents of the div disappear when using jQuery to extract it from a string

Update: I finally uncovered the reason behind the empty content of the #output div. The content is fetched from the server, which takes some time; by the time the document loads, the div remains empty. Does anyone have suggestions on how to extract infor ...

javascriptjqueryquery-string

embedding fashion within offspring component in vue

Looking to apply inline styles to a child component? I am trying to pass properties like height: 200px and overflow-y: scroll. I attempted passing it this way: <Childcomponent style="height: 200px; overflow-y: scroll;" /> but had no luck. ...

javascripthtmlcssvue.js

Trigger an Ajax request by clicking on the ShowLink button in JqGrid

When a user clicks on a link in a jqGrid, I want to load dynamic HTML content. Here is the function I have defined: function loadUserAdministrationList() { jQuery("#userlist").jqGrid({ url: '/Administration/GetData/', datatyp ...

jqueryjqgridjqgrid-asp.net