Question

我正在尝试将我的标签放在左侧而不是顶部，其中的内容位于其旁边。

我怎样才能用已有的东西做到这一点。

这就是我所拥有的：

＆＃13;

jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');
 
        // Show/Hide Tabs
        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
 
        // Change/remove current tab to active
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
 
        e.preventDefault();
    });
});

＆＃13;

body{
    background-color: black;
}

/*----- Tabs -----*/
.tabs {
    width:100%;
    display:inline-block;
    float: left;
}
 
    /*----- Tab Links -----*/
    /* Clearfix */
    .tab-links:after {
        display:block;
        clear:both;
        content:'';
    }
 
    .tab-links li {
        margin:0px 5px;
        /* float:left; */
        list-style:none;
    }
 
        .tab-links a {
            padding:9px 15px;
            display:inline-block;
            background:#7FB5DA;
            font-size:16px;
            font-weight:600;
            color:#4c4c4c;
            transition:all linear 0.15s;
            text-decoration:none;
        }
 
        .tab-links a:hover {
            background:#a7cce5;
            text-decoration:none;
        }
 
    li.active a, li.active a:hover {
        background:#fff;
        color:#4c4c4c;
    }
 
    /*----- Content of Tabs -----*/
    .tab-content {
        padding:15px;
        background:#fff;
        width: auto;
    }
 
        .tab {
            display:none;
        }
 
        .tab.active {
            display:block;
        }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
        <li><a href="#tab3">Tab #3</a></li>
        <li><a href="#tab4">Tab #4</a></li>
    </ul>
 
    <div class="tab-content">
        <div id="tab1" class="tab active">
            <p>Tab #1 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
        </div>
 
        <div id="tab2" class="tab">
            <p>Tab #2 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>
 
        <div id="tab3" class="tab">
            <p>Tab #3 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
        </div>
 
        <div id="tab4" class="tab">
            <p>Tab #4 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>
    </div>
</div>

＆＃13;

http://jsfiddle.net/cy33jjo1/

要得到这样的结果：http://codepen.io/joshadamous/full/wJKzv/

谢谢。如果我不够清楚，请告诉我。

Answer 1

试试这个http://jsfiddle.net/cy33jjo1/1/

只需在你的css中更改

.tab-content {
  background: #fff none repeat scroll 0 0;
  left: 127px;
  padding: 15px;
  position: absolute;
  top: 24px;
  width: 60%;
}

Answer 2

有很多理由说明为什么你无法让它发挥作用，如下所示：

1）请勿将display:inline-block;和float:left;应用于您案例中的容器.tabs

2）而是将display:inline-block;和float:left;应用于内部元素。在您的情况下，.tab-links和.tab-contents。

3）即使您未指定，ul 也会默认采用边距和填充。所以把它们变成0px's。

4）现在您希望.tab-content在.tab-links的右侧，以便涵盖width 的其余部分。< / p>

因此，您必须知道width .tab-links（我们在此不知道），因此您可以将width用于.tab-content，如{{1} }}

5）我们将使用JQuery了解width:calc(100% - {width_Of_TabLinks} px); 的宽度并进一步使用。

<强> Working : Demo

HTML ：无变化

<强> CSS

.tab-links

<强> JQuery的

body{
    background-color: black;
}

/*----- Tabs -----*/
.tabs {
    width:100%;
    /*display:inline-block; REMOVED*/
    /*float: left; REMOVED*/
}

/*----- Tab Links -----*/
.tab-links /* ADDED */
{
    margin:0px;
    padding:0px;
    display:inline-block;
    width:auto;
    float:left;
}

/* Clearfix */ 
.tab-links:after {
    display:block;
    clear:both;
    content:'';
}

.tab-links li {
    /*margin:0px 5px; REMOVED */
    list-style:none;
}

.tab-links a {
    padding:9px 15px;
    display:inline-block;
    background:#7FB5DA;
    font-size:16px;
    font-weight:600;
    color:#4c4c4c;
    transition:all linear 0.15s;
    text-decoration:none;
}

.tab-links a:hover {
    background:#a7cce5;
    text-decoration:none;
}

li.active a, li.active a:hover {
    background:#fff;
    color:#4c4c4c;
}

/*----- Content of Tabs -----*/
.tab-content {
    padding:15px;
    background:#fff;
    width: auto;        
    /*Added*/
    float:left;
    display:inline-block;        
}

.tab {
    display:none;
}

.tab.active {
    display:block;
}

注意：您可以在上面的JQuery代码中看到//Added this two lines to your JQuery var wTabLinks = $(".tab-links").outerWidth(); $(".tab-content").css("width", "calc(100% - " + wTabLinks + "px - 30px)");，这是因为-30px中的padding:9px 15px;。在这里，您已将.tab-content {....}左右填充到标签内容。

将我的标签放在左侧，右侧显示我的内容

2 个答案: