外をクリックするとタブのフォーカスが外れる

-1

私は4つのタブを持つウェブページを持っています。それは、タブとその内容を含むdivの外をクリックしたときを除いて、正常に動作しています。アクティブなタブのフォーカスは失われていますが、これは望ましくありません。ここで外をクリックするとタブのフォーカスが外れる

コード

<body> 
<img src="images/2.png" style="width: 950px; height: 60px;"> 
<div style="margin-top: -50px; margin-left: 5px; position: absolute; font-size: 32px; color: green;">Test 
</div> 
<div style="width: 69px; height: 57px; margin-left: 951px; margin-top: -58px;"> 
    <a href="#" title="Logout"><img src="images/logout.png" style="width: 78px; height: 73px;"></a> 
</div> 
<div style="margin-top: 100px;"> 
    <ul id="tabs" class="tab"> 
    <li><a id="load" href="#" class="tablinks" onclick="openTab(event, 'Reference')">Reference</a></li> 
    <li><a href="#" class="tablinks" onclick="openTab(event, 'TestStrategy')">Test Strategy</a></li> 
    <li><a href="#" class="tablinks" onclick="openTab(event, 'TestCase')">Test Case</a></li> 
    <li><a href="#" class="tablinks" onclick="openTab(event, 'TestSummary')">Test Summary</a></li> 
    </ul> 

    <img src="images/line.png" style="margin-top: -14px; margin-left: 6px; width: 700px; height: 4px; position: absolute;"> 

    <div id="Reference" class="tabcontent"> 
    <p>Document_1.docx</p> 
    <hr align="left"> 
    <p>Document_2.docx</p> 
    <hr align="left"> 
    <p>Document_3.docx</p> 
    <hr align="left"> 
    </div> 

    <div id="TestStrategy" class="tabcontent"> 
    <p>TS_1.docx</p> 
    <hr align="left"> 
    <p>TS_2.docx</p> 
    <hr align="left"> 
    </div> 

    <div id="TestCase" class="tabcontent"> 
    <p>TC_1.xlsx</p> 
    <hr align="left"> 
    <p>TC_2.xlsx</p> 
    <hr align="left"> 
    <p>TC_3.xlsx</p> 
    <hr align="left"> 
    <p>TC_4.xlsx</p> 
    <hr align="left"> 
    <p>TC_5.xlsx</p> 
    <hr align="left"> 
    </div> 

    <div id="TestSummary" class="tabcontent"> 
    <p>Summary_1.docx</p> 
    <hr align="left"> 
    <p>Summary_2.pdf</p> 
    <hr align="left"> 
    <p>Summary_3.ppt</p> 
    <hr align="left"> 
    </div> 
</div> 
</body>

はfiddleです。

解決方法あなたはtitleでタブ名を使用することができれば

出典

2016-06-22 Leo

。スタイルを保持するにはアクティブなタブに 'class'を追加する必要があります – Pugazh

あなたのタブは機能しません。 – makshh

それは私の食で働いています。なぜそれがフィドルで正しく表示されないのか分かりません – Leo

が見添付スニペット

$(document).ready(function(){ 
 
\t alert("Loaded"); 
 
\t document.getElementById('Reference').style.display = "block"; 
 
\t document.getElementById('load').focus(); 
 
    
 
    
 

 
}); 
 

 
function openTab(evt, tabName) { 
 
\t //alert(evt + "-" + tabName); 
 
    // Declare all variables 
 
    var i, tabcontent, tablinks; 
 

 
    // Get all elements with class="tabcontent" and hide them 
 
    tabcontent = document.getElementsByClassName("tabcontent"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
     tabcontent[i].style.display = "none"; 
 
    } 
 

 
    // Get all elements with class="tablinks" and remove the class "active" 
 
    tablinks = document.getElementsByClassName("tablinks"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
     tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
    } 
 

 
    // Show the current tab, and add an "active" class to the link that opened the tab 
 
    document.getElementById(tabName).style.display = "block"; 
 
    evt.currentTarget.className += " active"; 
 
}

body { 
 
\t font-family:"Segoe UI"; 
 
\t font-size:75%; 
 
\t width:1024px; 
 
/* \t height: 760px;*/ 
 
\t line-height:1; 
 
\t outline:none; 
 
\t overflow:auto; 
 
\t background:url(../images/1.png); 
 
\t margin:0 auto; 
 
\t background-repeat: no-repeat; 
 
\t background-size: 1024px 760px; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
/* background-color: #cccccc;*/ 
 
} 
 

 
.active{ 
 
background:#333f50 !important; 
 
} 
 
hr { 
 
    height: 10px; 
 
    width: 69.2%; 
 
/* margin-left: -7px;*/ 
 
    border: 0; 
 
    box-shadow: 0 10px 6px -10px #bababa inset; 
 
} 
 

 
/* Style the list */ 
 
ul.tab { 
 
    list-style-type: none; 
 
    margin-left: 5px; 
 
    padding: 0; 
 
    overflow: hidden; 
 
/* border: 3px solid red;*/ 
 
    width: 485px; 
 
    background-color: #f1f1f1; 
 
} 
 

 
/* Float the list items side by side */ 
 
ul.tab li {float: left;} 
 

 
/* Style the links inside the list items */ 
 
ul.tab li a { 
 
    display: inline-block; 
 
    color: white; 
 
    background-color: #ADB9CA; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 17px; 
 
    font-family:Segoe UI; 
 
    border: 1px solid #CCC; 
 
/* margin-left: 2px;*/ 
 
} 
 

 
/* Change background color of links on hover */ 
 
ul.tab li a:hover {background-color: #ddd;} 
 

 
/* Create an active/current tablink class */ 
 
ul.tab li a:focus, .active {background-color: #333F50;} 
 

 
/* Style the tab content */ 
 
.tabcontent { 
 
    display: none; 
 
    padding: 6px 12px; 
 
/* border: 1px solid #ccc;*/ 
 
    border-top: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="images/2.png" style="width: 950px; height: 60px;"> 
 
<div 
 
\t style="margin-top: -50px; margin-left: 5px; position: absolute; font-size: 32px; color: green;">Test 
 
</div> 
 
<div style="width: 69px; height: 57px; margin-left: 951px; margin-top: -58px;"> 
 
<a href="#" title="Logout"><img src="images/logout.png" style="width: 78px; height: 73px;"></a> 
 
</div> 
 
<div style="margin-top: 100px;"> 
 
<ul id="tabs" class="tab"> 
 
<li><a id="load" href="#" class="tablinks" onclick="openTab(event, 'Reference')">Reference</a></li> 
 
    <li><a href="#" class="tablinks" onclick="openTab(event, 'TestStrategy')">Test Strategy</a></li> 
 
    <li><a href="#" class="tablinks" onclick="openTab(event, 'TestCase')">Test Case</a></li> 
 
    <li><a href="#" class="tablinks" onclick="openTab(event, 'TestSummary')">Test Summary</a></li> 
 
    
 
</ul> 
 
</div> 
 
<img src="images/line.png" 
 
\t style="margin-top: -14px; margin-left: 6px; width: 700px; height: 4px; position: absolute;"> 
 

 
<div id="Reference" class="tabcontent"> 
 
<p>Document_1.docx</p> 
 
<hr align="left"> 
 
<p>Document_2.docx</p> 
 
<hr align="left"> 
 
<p>Document_3.docx</p> 
 
<hr align="left"> 
 
</div> 
 

 
<div id="TestStrategy" class="tabcontent"> 
 
<p>TS_1.docx</p> 
 
<hr align="left"> 
 
<p>TS_2.docx</p> 
 
<hr align="left"> 
 
</div> 
 

 
<div id="TestCase" class="tabcontent"> 
 
<p>TC_1.xlsx</p> 
 
<hr align="left"> 
 
<p>TC_2.xlsx</p> 
 
<hr align="left"> 
 
<p>TC_3.xlsx</p> 
 
<hr align="left"> 
 
<p>TC_4.xlsx</p> 
 
<hr align="left"> 
 
<p>TC_5.xlsx</p> 
 
<hr align="left"> 
 
</div> 
 

 
<div id="TestSummary" class="tabcontent"> 
 
<p>Summary_1.docx</p> 
 
<hr align="left"> 
 
<p>Summary_2.pdf</p> 
 
<hr align="left"> 
 
<p>Summary_3.ppt</p> 
 
<hr align="left"> 
 
</div> 
 
</div>

出典

2016-06-22 12:21:48

あなたが行った変更に言及してください。 – Leo

アクティブなクラスにcssを追加する必要があります。このコードを追加し、動作していない場合は私に知らせてください。 '.active { 背景：＃333f50！important; } ' –

を持って、ここではあまり整然とコードです。望ましい行動だFiddle

$(function() { 
 
    var tab = $('.active').attr('title'); 
 
    $('#' + tab).show(); 
 

 
    $('ul.tab a').click(function() { 
 
    tab = $(this).attr('title'); 
 
    $('.tabcontent').hide(); 
 
    $('ul.tab a').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    $('#' + tab).show(); 
 
    }); 
 
})

body { 
 
    font-family: "Segoe UI"; 
 
    font-size: 75%; 
 
    width: 1024px; 
 
    /* \t height: 760px;*/ 
 
    line-height: 1; 
 
    outline: none; 
 
    overflow: auto; 
 
    background: url(../images/1.png); 
 
    margin: 0 auto; 
 
    background-repeat: no-repeat; 
 
    background-size: 1024px 760px; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    /* background-color: #cccccc;*/ 
 
} 
 

 
hr { 
 
    height: 10px; 
 
    width: 69.2%; 
 
    /* margin-left: -7px;*/ 
 
    border: 0; 
 
    box-shadow: 0 10px 6px -10px #bababa inset; 
 
} 
 

 

 
/* Style the list */ 
 

 
ul.tab { 
 
    list-style-type: none; 
 
    margin-left: 5px; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    /* border: 3px solid red;*/ 
 
    width: 485px; 
 
    background-color: #f1f1f1; 
 
} 
 

 

 
/* Float the list items side by side */ 
 

 
ul.tab li { 
 
    float: left; 
 
} 
 

 

 
/* Style the links inside the list items */ 
 

 
ul.tab li a { 
 
    display: inline-block; 
 
    color: white; 
 
    background-color: #ADB9CA; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 17px; 
 
    font-family: Segoe UI; 
 
    border: 1px solid #CCC; 
 
    /* margin-left: 2px;*/ 
 
} 
 

 

 
/* Change background color of links on hover */ 
 

 
ul.tab li a:hover { 
 
    background-color: #ddd; 
 
} 
 

 

 
/* Create an active/current tablink class */ 
 

 
ul.tab li a:focus, 
 
ul.tab li a.active { 
 
    background-color: #333F50; 
 
} 
 

 

 
/* Style the tab content */ 
 

 
.tabcontent { 
 
    display: none; 
 
    padding: 6px 12px; 
 
    /* border: 1px solid #ccc;*/ 
 
    border-top: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<img src="images/2.png" style="width: 950px; height: 60px;"> 
 
<div style="margin-top: -50px; margin-left: 5px; position: absolute; font-size: 32px; color: green;">Test 
 
</div> 
 
<div style="width: 69px; height: 57px; margin-left: 951px; margin-top: -58px;"> 
 
    <a href="#" title="Logout"><img src="images/logout.png" style="width: 78px; height: 73px;"></a> 
 
</div> 
 
<div style="margin-top: 100px;"> 
 
    <ul id="tabs" class="tab"> 
 
    <li><a class="active" href="#" class="tablinks" title="Reference">Reference</a></li> 
 
    <li><a href="#" class="tablinks" title="TestStrategy">Test Strategy</a></li> 
 
    <li><a href="#" class="tablinks" title="TestCase">Test Case</a></li> 
 
    <li><a href="#" class="tablinks" title="TestSummary">Test Summary</a></li> 
 
    </ul> 
 

 
    <img src="images/line.png" style="margin-top: -14px; margin-left: 6px; width: 700px; height: 4px; position: absolute;"> 
 

 
    <div id="Reference" class="tabcontent"> 
 
    <p>Document_1.docx</p> 
 
    <hr align="left"> 
 
    <p>Document_2.docx</p> 
 
    <hr align="left"> 
 
    <p>Document_3.docx</p> 
 
    <hr align="left"> 
 
    </div> 
 

 
    <div id="TestStrategy" class="tabcontent"> 
 
    <p>TS_1.docx</p> 
 
    <hr align="left"> 
 
    <p>TS_2.docx</p> 
 
    <hr align="left"> 
 
    </div> 
 

 
    <div id="TestCase" class="tabcontent"> 
 
    <p>TC_1.xlsx</p> 
 
    <hr align="left"> 
 
    <p>TC_2.xlsx</p> 
 
    <hr align="left"> 
 
    <p>TC_3.xlsx</p> 
 
    <hr align="left"> 
 
    <p>TC_4.xlsx</p> 
 
    <hr align="left"> 
 
    <p>TC_5.xlsx</p> 
 
    <hr align="left"> 
 
    </div> 
 

 
    <div id="TestSummary" class="tabcontent"> 
 
    <p>Summary_1.docx</p> 
 
    <hr align="left"> 
 
    <p>Summary_2.pdf</p> 
 
    <hr align="left"> 
 
    <p>Summary_3.ppt</p> 
 
    <hr align="left"> 
 
    </div> 
 
</div>

出典

2016-06-22 12:59:30 Pugazh

外をクリックするとタブのフォーカスが外れる

答えて

関連する問題