Question

我正在制作具有onClick功能的水平标签，onClik标签我的相应标签正在打开，但我没有正确对齐我的伪类错误，我已将其添加到我的活动类

<!DOCTYPE html>
<html>
  <head>
    <title>ABC</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {font-family: Arial;}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 0px solid #ccc;
    background-color: #fff;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    border: 1px solid #ccc;
    margin-right:20px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: transparent;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: transparent;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
    border:1px solid #CBCBCB;
}

.tablinks.active:before,
.tablinks.active:after {
    content:'';
    display: inline-block;
    width:0;
    height:0;
    border:10px solid transparent;
    vertical-align: middle;
}
.tablinks.active:before {
    border-bottom-color: #CBCBCB;
    /*border-bottom-color: #CBCBCB;
    border-right-color: #CBCBCB;*/
}
.tablinks.active:after {
   /* border-left-color: #CBCBCB;*/
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
</style>

  </head>
  <body>
    <div class="container">
        <h3>Tabs Example</h3>

        <div class="tab">
          <button class="tablinks" onclick="openCity(event, 'tab1')">London</button>
          <button class="tablinks" onclick="openCity(event, 'tab2')">Paris</button>
          <button class="tablinks" onclick="openCity(event, 'tab3')">Tokyo</button>
        </div>

        <div id="tab1" class="tabcontent">
          <h3>London</h3>
          <p>London is the capital city of England.</p>
        </div>

        <div id="tab2" class="tabcontent">
          <h3>Paris</h3>
          <p>Paris is the capital of France.</p> 
        </div>

        <div id="tab3" class="tabcontent">
          <h3>Tokyo</h3>
          <p>Tokyo is the capital of Japan.</p>
        </div>
    </div>



    <script>
        function openCity(evt, tabName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";
        }
    </script>

  </body>
</html>

我得到了这个结果：

我需要这样的结果：

Answer 1

刚刚添加了所需的CSS并删除了一些无用的东西。

此外，如果你想玩游戏，这就是小提琴：https://jsfiddle.net/saurabhsharma/c8ouw8w6/

＆＃13;

protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
            {
                base.OnElementChanged(e);

                if (e.OldElement != null || Element == null)
                    return;

                if(Build.VERSION.SdkInt >= BuildVersionCodes.N)
                     Element.HeightRequest = 40;
            }

＆＃13;

function openCity(evt, tabName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";
        }

＆＃13;

body {font-family: Arial;}

/* Style the tab */
.tab {
    border: 0px solid #ccc;
    background-color: #fff;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    border: 1px solid #ccc;
    margin-right:20px;
    position: relative;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: transparent;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: transparent;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
    border:1px solid #CBCBCB;
    margin-top: 10px;
    width: 100%;
    float: left;
}

.tablinks.active:before {
    content:'';
    display: inline-block;
    width:0;
    height:0;
    border:10px solid transparent;
    vertical-align: middle;
    left:50%;
    transform: translateX(-50%);
    position: absolute;
    bottom: -10px;
}
.tablinks.active:before {
    border-bottom-color: #CBCBCB;
    /*border-bottom-color: #CBCBCB;
    border-right-color: #CBCBCB;*/
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

＆＃13;

Answer 2

您需要使用overflow从.tab和clearfix删除:after

.tab {
    border: 0px solid #ccc;
    background-color: #fff;
}
.tab:after {
  content: "";
  display: table;
  clear: both;
}

将active button设置为relative这样的位置

.tab button.active {
    background-color: transparent;
    position: relative;
}

然后，更改:before和:after

的某些css

.tablinks.active:before,
.tablinks.active:after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    vertical-align: middle;
    position: absolute;
    bottom: -16px;
    left: 10px;
    z-index: 9;
}

为margin-top

设置tabcontent

.tabcontent {
    display: none;
    padding: 6px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
    border:1px solid #CBCBCB;
    margin-top: 15px; //Added
}

工作小提琴here

水平标签箭头对齐问题

2 个答案: