JQuery Tab Styling

Report · Mar 17, 2018

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.

Report · Mar 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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Mar 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>

<head>

<title>jQuery UI Tabs</title>

</head>

<body>

<ul>

</ul>

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

<h3>Ordered List</h3>

<ol>

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

<h3>Unordered List</h3>

<ul>

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

$( function() {

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

} );

</script>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Mar 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>

<head>

<title>Bootstrap 4 Toggleable Tabs</title>

<!--Bootstrap 4 default CSS

</head>

<body>

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

<br>

</ul>

<ol>

</ol>

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

</div>

<ul>

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

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

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

JQuery Tab Styling

1 Correct answer