diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor
index 8d44d43df3f..be0c0544c1e 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor
@@ -437,7 +437,7 @@ private void Navigation()
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TabsChromeStyleTitle"]" Introduction="@Localizer["TabsChromeStyleIntro"]" Name="Chrome">
-    <Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome">
+    <Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome" AllowDrag="true">
         <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
             <div>@Localizer["TabItem1Content"]</div>
         </TabItem>
@@ -454,7 +454,7 @@ private void Navigation()
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TabsCapsuleStyleTitle"]" Introduction="@Localizer["TabsCapsuleStyleIntro"]" Name="Capsule">
-    <Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Capsule">
+    <Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Capsule" AllowDrag="true">
         <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
             <div>@Localizer["TabItem1Content"]</div>
         </TabItem>
diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor b/src/BootstrapBlazor/Components/Tab/Tab.razor
index 5b27a848824..8d35f24b3a6 100644
--- a/src/BootstrapBlazor/Components/Tab/Tab.razor
+++ b/src/BootstrapBlazor/Components/Tab/Tab.razor
@@ -51,11 +51,11 @@ else
                                 }
                                 else if (item.IsDisabled)
                                 {
-                                    @RenderDisabledHeaderByStyle(item)
+                                    @RenderDisabledHeader(item)
                                 }
                                 else
                                 {
-                                    @RenderHeaderByStyle(item)
+                                    @RenderHeader(item)
                                 }
                             }
                             @if (IsCard || IsBorderCard)
@@ -124,7 +124,7 @@ else
         @RenderTabItemContent(item)
     </CascadingValue>;
 
-    RenderFragment RenderChromeDisabledHeader(TabItem item) =>
+    RenderFragment RenderDisabledHeader(TabItem item) =>
     @<div @key="@item" class="@GetItemWrapClassString(item)">
         <div role="tab" class="@GetClassString(item)">
             @RenderHeaderContent(item)
@@ -136,14 +136,9 @@ else
         }
     </div>;
 
-    RenderFragment RenderDefaultDisabledHeader(TabItem item) =>
-    @<div @key="item" role="tab" class="@GetClassString(item)">
-        @RenderHeaderContent(item)
-    </div>;
-
-    RenderFragment RenderChromeHeader(TabItem item) =>
-    @<div @key="@item" class="@GetItemWrapClassString(item)">
-        <a href="@item.Url" role="tab" tabindex="-1" class="@GetClassString(item)" @onclick="@(() => OnClickTabItem(item))" @onclick:preventDefault="@(!ClickTabToNavigation)" draggable="@DraggableString">
+    RenderFragment RenderHeader(TabItem item) =>
+    @<div @key="@item" class="@GetItemWrapClassString(item)" draggable="@DraggableString">
+        <a href="@item.Url" role="tab" tabindex="-1" class="@GetClassString(item)" @onclick="@(() => OnClickTabItem(item))" @onclick:preventDefault="@(!ClickTabToNavigation)">
             @RenderHeaderContent(item)
         </a>
         @if (TabStyle == TabStyle.Chrome)
@@ -153,11 +148,6 @@ else
         }
     </div>;
 
-    RenderFragment RenderDefaultHeader(TabItem item) =>
-    @<a @key="item" href="@item.Url" role="tab" tabindex="-1" class="@GetClassString(item)" @onclick="@(() => OnClickTabItem(item))" @onclick:preventDefault="@(!ClickTabToNavigation)" draggable="@DraggableString">
-        @RenderHeaderContent(item)
-    </a>;
-
     RenderFragment RenderHeaderContent(TabItem item) =>
     @<div class="tabs-item-body">
         @if (!string.IsNullOrEmpty(item.Icon))
diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs
index 700f5d64ceb..231e641607c 100644
--- a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs
+++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs
@@ -29,7 +29,6 @@ public partial class Tab : IHandlerException
         .Build();
 
     private string? GetClassString(TabItem item) => CssBuilder.Default("tabs-item")
-        .AddClass("active", TabStyle == TabStyle.Default && item.IsActive && !item.IsDisabled)
         .AddClass("disabled", item.IsDisabled)
         .AddClass(item.CssClass)
         .AddClass("is-closeable", ShowClose)
@@ -329,7 +328,7 @@ public partial class Tab : IHandlerException
 
     private Placement LastPlacement { get; set; }
 
-    private string DraggableString => AllowDrag ? "true" : "false";
+    private string? DraggableString => AllowDrag ? "true" : null;
 
     /// <summary>
     /// <inheritdoc/>
@@ -879,10 +878,6 @@ public async Task DragItemCallback(int originIndex, int currentIndex)
 
     private string? GetIdByTabItem(TabItem item) => (ShowFullScreen && item.ShowFullScreen) ? ComponentIdGenerator.Generate(item) : null;
 
-    private RenderFragment RenderDisabledHeaderByStyle(TabItem item) => TabStyle == TabStyle.Default ? RenderDefaultDisabledHeader(item) : RenderChromeDisabledHeader(item);
-
-    private RenderFragment RenderHeaderByStyle(TabItem item) => TabStyle == TabStyle.Default ? RenderDefaultHeader(item) : RenderChromeHeader(item);
-
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.js b/src/BootstrapBlazor/Components/Tab/Tab.razor.js
index 6e4c563095c..fe95d87df5a 100644
--- a/src/BootstrapBlazor/Components/Tab/Tab.razor.js
+++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.js
@@ -20,12 +20,12 @@ const resize = tab => {
     }
 
     const scroll = tab.scroll
-    const lastItem = [...tabNav.querySelectorAll('.tabs-item')].pop()
+    const lastItem = [...tabNav.querySelectorAll('.tabs-item-wrap')].pop()
     if (lastItem) {
         if (tab.vertical) {
             const tabHeight = scroll.offsetHeight
             let itemHeight = 0
-            tabNav.querySelectorAll('.tabs-item').forEach(v => {
+            tabNav.querySelectorAll('.tabs-item-wrap').forEach(v => {
                 itemHeight += v.offsetHeight
             })
             if (itemHeight > tabHeight) {
@@ -39,7 +39,7 @@ const resize = tab => {
             // Item 总宽度大于 Nav 宽度
             const tabWidth = scroll.offsetWidth
             let itemWidth = 0
-            tabNav.querySelectorAll('.tabs-item').forEach(v => {
+            tabNav.querySelectorAll('.tabs-item-wrap').forEach(v => {
                 itemWidth += v.offsetWidth
             })
             if (itemWidth > tabWidth) {
@@ -55,7 +55,7 @@ const resize = tab => {
 const active = tab => {
     resize(tab)
 
-    const activeTab = tab.tabNav.querySelector('.tabs-item.active')
+    const activeTab = tab.tabNav.querySelector('.tabs-item-wrap.active')
     if (activeTab) {
         if (tab.vertical) {
             const top = getPosition(activeTab).top - getPosition(activeTab.parentNode).top + activeTab.offsetHeight
@@ -103,17 +103,21 @@ const active = tab => {
 }
 
 const setDraggable = tab => {
-    disposeDragItems(tab.dragItems)
+    disposeDragItems(tab.dragItems);
+
+    if (tab.el.querySelector('.tabs-item-wrap[draggable="true"]') === null) {
+        return;
+    }
 
     let dragItem = null;
     let index = 0
 
-    tab.dragItems = [...tab.el.firstChild.querySelectorAll('.tabs-item')]
+    tab.dragItems = [...tab.el.firstChild.querySelectorAll('.tabs-item-wrap')]
     tab.dragItems.forEach(item => {
         EventHandler.on(item, 'dragstart', e => {
             item.parentNode.classList.add('tab-dragging')
             item.classList.add('tab-drag')
-            tab.dragItems = [...tab.el.firstChild.querySelectorAll('.tabs-item')]
+            tab.dragItems = [...tab.el.firstChild.querySelectorAll('.tabs-item-wrap')]
             index = tab.dragItems.indexOf(item)
             dragItem = item
             e.dataTransfer.effectAllowed = 'move'
diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss
index 172ccf2ac73..35acdabb21a 100644
--- a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss
+++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss
@@ -226,7 +226,6 @@
 
 .tabs.tabs-card > .tabs-header .tabs-item.active,
 .tabs.tabs-border-card > .tabs-header .tabs-item.active {
-    background-color: var(--bs-body-bg);
     border-width: 0 1px 0px 0;
 }
 
@@ -470,21 +469,23 @@
     min-height: calc(100% + 2rem);
 }
 
-.tab-drag-over {
-    animation: drag-tab-item 1s linear infinite;
-}
+.tab-dragging {
+    .tabs-item-wrap:not(:hover) .tabs-item {
+        pointer-events: none;
+    }
 
-.tab-dragging th[draggable] * {
-    pointer-events: none;
-}
+    .tab-drag-over .tabs-item {
+        animation: drag-tab-item 1s linear infinite;
+    }
 
-.tab-drag {
-    background-color: var(--bs-secondary);
+    .tab-drag {
+        background-color: var(--bs-secondary);
+    }
 }
 
 @keyframes drag-tab-item {
     50% {
-        background-color: var(--bs-primary);
+        background-color: var(--bs-primary) !important;
     }
 }
 
@@ -496,10 +497,7 @@
     --bb-tabs-item-active-color: var(--bs-body-color);
     --bb-tabs-item-hover-color: var(--bs-body-color);
     --bb-tabs-item-bg-color: rgba(var(--bs-body-color-rgb), 0.08);
-
-    .tabs-nav {
-        background-color: var(--bb-tabs-header-bg-color);
-    }
+    background-color: var(--bb-tabs-header-bg-color);
 
     .tabs-item-fix {
         border: none;
@@ -540,6 +538,14 @@
             }
         }
     }
+
+    .tab-drag-over .tabs-item {
+        animation: none;
+    }
+
+    .tab-drag-over .tabs-item .tabs-item-body {
+        animation: drag-tab-item 1s linear infinite;
+    }
 }
 
 .tabs-chrome > .tabs-header {