Skip to main content
R
roliver1969
Known Participant
March 17, 2018
Answered

JQuery Tab Styling

  • March 17, 2018
  • 3 replies
  • 493 views

I'm having an issue with content placed within a JQuery tab having its CSS styles messed up--seemingly inheriting styling from the JQuery CSS files. The content in question includes ULs, which JQuery uses for the basic tab structure.

I have previously used the Spry tabs and had no issue placing any content within them--the CSS styling was never affected. I don't have any code to show as I'm just starting a redesign and nothing is online. I'm just wondering if there are any known issues with this?

I'm using the 2018.1 version of Dreamweaver on Windows 10.

Also, if anyone wants to convince me to use Bootstrap, now is the time. I compared the two and it seemed like JQuery tabs generated cleaner code.

    This topic has been closed for replies.
    Correct answer Nancy OShea

    roliver1969  wrote

    Also, if anyone wants to convince me to use Bootstrap, now is the time. I compared the two and it seemed like JQuery tabs generated cleaner code.

    It all depends on what you want.  If you're building a responsive website, Bootstrap can save you from having to manually write a lot of CSS media queries.   Below is a Bootstrap 4 example.  The  first one shows default Bootstrap CSS style.  The second uses a Bootswatch Solar Theme.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 4 Toggleable Tabs</title>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Bootstrap 4 default CSS

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">-->

    <!--Bootswatch Solar Theme-->

    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/4.0.0/solar/bootstrap.min.css" rel="stylesheet" integrity="sha384-05+VJtAaH13TDtIHikH0vJFqCdHB4VPg9dYfcALIbTdOSDwSL299oJ173uQBedD5" crossorigin="anonymous">

    </head>

    <body>

    <div class="container">

    <div class="row">

    <div class="col-sm-8 mx-auto">

    <h2 class="text-center">Bootstrap 4 Toggleable Tabs</h2>

    <br>

    <!-- Nav tabs -->

    <ul class="nav nav-tabs" role="tablist">

    <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home">Home</a> </li>

    <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a> </li>

    <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a> </li>

    </ul>

    <!-- Tab panes -->

    <div class="tab-content">

    <div id="home" class="container tab-pane active"><br>

    <h3>HOME</h3>

    <ol>

    <li>Item</li>

    <li>Item</li>

    <li>Item</li>

    </ol>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    </div>

    <div id="menu1" class="container tab-pane fade"><br>

    <h3>Menu 1</h3>

    <ul>

    <li>Something here</li>

    <li>Something here</li>

    <li>Something here</li>

    </ul>

    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>

    <div id="menu2" class="container tab-pane fade"><br>

    <h3>Menu 2</h3>

    <img class="img-thumbnail" src="https://placeimg.com/450/325" alt="placeholder">

    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

    </div>

    </div>

    </div>

    </div>

    </div>

    <!--latest jQuery Core-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--Popper JS-->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

    <!--latest Bootstrap 4 JS-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

    </body>

    </html>

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    March 17, 2018

    roliver1969  wrote

    Also, if anyone wants to convince me to use Bootstrap, now is the time. I compared the two and it seemed like JQuery tabs generated cleaner code.

    It all depends on what you want.  If you're building a responsive website, Bootstrap can save you from having to manually write a lot of CSS media queries.   Below is a Bootstrap 4 example.  The  first one shows default Bootstrap CSS style.  The second uses a Bootswatch Solar Theme.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 4 Toggleable Tabs</title>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Bootstrap 4 default CSS

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">-->

    <!--Bootswatch Solar Theme-->

    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/4.0.0/solar/bootstrap.min.css" rel="stylesheet" integrity="sha384-05+VJtAaH13TDtIHikH0vJFqCdHB4VPg9dYfcALIbTdOSDwSL299oJ173uQBedD5" crossorigin="anonymous">

    </head>

    <body>

    <div class="container">

    <div class="row">

    <div class="col-sm-8 mx-auto">

    <h2 class="text-center">Bootstrap 4 Toggleable Tabs</h2>

    <br>

    <!-- Nav tabs -->

    <ul class="nav nav-tabs" role="tablist">

    <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home">Home</a> </li>

    <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a> </li>

    <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a> </li>

    </ul>

    <!-- Tab panes -->

    <div class="tab-content">

    <div id="home" class="container tab-pane active"><br>

    <h3>HOME</h3>

    <ol>

    <li>Item</li>

    <li>Item</li>

    <li>Item</li>

    </ol>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    </div>

    <div id="menu1" class="container tab-pane fade"><br>

    <h3>Menu 1</h3>

    <ul>

    <li>Something here</li>

    <li>Something here</li>

    <li>Something here</li>

    </ul>

    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>

    <div id="menu2" class="container tab-pane fade"><br>

    <h3>Menu 2</h3>

    <img class="img-thumbnail" src="https://placeimg.com/450/325" alt="placeholder">

    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

    </div>

    </div>

    </div>

    </div>

    </div>

    <!--latest jQuery Core-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--Popper JS-->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

    <!--latest Bootstrap 4 JS-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    March 17, 2018

    Below is a jQuery UI example with the pepper-grinder theme.  As expected, content inside the widget inherits styles from the theme's CSS file.   To change styles, use a different theme.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>jQuery UI Tabs</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--jQuery UI Theme, pepper-grinder-->

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">

    </head>

    <body>

    <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">

    <h3>Heading 3</h3>

    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>

    </div>

    <div id="tabs-2">

    <h3>Ordered List</h3>

    <ol>

        <li>Item </li>

        <li>Item </li>

        <li>Item </li>

        <li>Item </li>

    </ol>

    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus.</p>

    </div>

    <div id="tabs-3">

    <h3>Unordered List</h3>

    <ul>

    <li>something here</li>

    <li>something here</li>

    <li>something here</li>

    <li>something here</li>

    </ul>

    <p>Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>

    </div>

    </div>

    <!--jQuery core library-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--jQuery UI-->

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

    <script>

      $( function() {

        $( "#tabs" ).tabs();

      } );

      </script>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    March 17, 2018

    Bootstrap is a framework for creating responsive page layouts and adding components to projects like panels, carousel sliders, modal windows, responsive images,  forms, buttons and much, much more. 

    If all you need are tabbed panels, don't use Bootstrap for that.  That's like swatting flies with a sledgehammer.  However, if you're already using Bootstrap for your layout, tabbed panels are EZPZ.

    On the other hand, jQuery UI is a widget library.  You can roll your own styles with Theme Roller

    https://jqueryui.com/themeroller/  or use any of the CDN hosted themes below.

    jQuery UI – All Versions | jQuery CDN

    base

    black-tie

    blitzer

    cupertino

    dark-hive

    dot-luv

    eggplant

    excite-bike

    flick

    hot-sneaks

    humanity

    le-frog

    mint-choc

    overcast

    pepper-grinder

    redmond

    smoothness

    south-street

    start

    sunny

    swanky-purse

    trontastic

    ui-darkness

    ui-lightness

    vader

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices