1

だから私はcodeigniterフレームワークを使用してWebページを構築しています、私はいくつかのcssを使用する単純なページを持っています。私はIE7を除くすべてのブラウザーで正常に動作しません（そしておそらく他のバージョンのIE、私はまだチェックしていません）。

問題は、タブを表示して、クリック時に選択されたように見えるようにしようとしていることです。

私のCSSは：

    .nav {
  margin-bottom: 20px;
  list-style: none;
}

.nav > li > a {
  display: block;
}

.nav > li > a:hover {
  text-decoration: none;
  background-color: #eeeeee;
}

.nav-tabs:before,
.nav-tabs:after{
  display: table;
  line-height: 0;
  content: "";
}

.nav-tabs:after {
  clear: both;
}

.nav-tabs > li{
  float: left;
  display: inline;
}

.nav-tabs > li > a{
  padding-right: 12px;
  padding-left: 12px;
  margin-right: 0px;
  line-height: 14px;
}

.nav-tabs {
  border-bottom: 1px solid #ddd;
}

.nav-tabs > li {
  margin-bottom: -1px;
}

.nav-tabs > li > a {
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 20px;
  border: 1px solid transparent;
  -webkit-border-radius: 4px 4px 0 0;
     -moz-border-radius: 4px 4px 0 0;
          border-radius: 4px 4px 0 0;
}

.nav-tabs > li > a:hover {
  border-color: #eeeeee #eeeeee #dddddd;
}

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
  color: #555555;
  cursor: default;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}

li.selected{
  color: #555555;
  cursor: default;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
  display:inline;
}

私にはかなりの問題があります。つまり、アイテムを選択しても何も起こらないのに、ハワーがまったく機能していないのにリストがインラインで表示されません。これが私のファイルです：

    <script type="text/javascript">
$(function() {
    $("#content_of_tab").load('<?php echo site_url('console/show_tab2'); ?>');
    document.getElementById("tab2").setAttribute("class", "selected");
});

function change_tab(a){
    //document.getElementById("tab1").setAttribute("class", "unselected");
    document.getElementById("tab2").setAttribute("class", "unselected");
    document.getElementById("tab3").setAttribute("class", "unselected");
    document.getElementById("tab4").setAttribute("class", "unselected");
    document.getElementById("tab5").setAttribute("class", "unselected");
    document.getElementById("tab6").setAttribute("class", "unselected");
    if(a==1){
        $("#content_of_tab").load('<?php echo site_url('console/show_tab1'); ?>');
        document.getElementById("tab1").setAttribute("class", "selected");
    }
    else if(a==2){
        $("#content_of_tab").load('<?php echo site_url('console/show_tab2'); ?>');
        document.getElementById("tab2").setAttribute("class", "selected");
    }
    else if(a==3){
        $("#content_of_tab").load('<?php echo site_url('console/show_tab3'); ?>');
        document.getElementById("tab3").setAttribute("class", "selected");
    }
    else if(a==4){
        $("#content_of_tab").load('<?php echo site_url('console/show_tab4'); ?>');
        document.getElementById("tab4").setAttribute("class", "selected");
    }
    else if(a==5){
        $("#content_of_tab").load('<?php echo site_url('console/show_tab5'); ?>');
        document.getElementById("tab5").setAttribute("class", "selected");
    }
    else if(a==6){
        $("#content_of_tab").load('<?php echo site_url('console/show_tab6'); ?>');
        document.getElementById("tab6").setAttribute("class", "selected");
    }
}
</script>

<div id="tabs" style="width: 976px;">
    <ul class="nav nav-tabs" >
    <!--    <li id="tab1" onclick="change_tab(1);"><a href="#">Pregled polic</a></li>  -->
        <li id="tab2" onclick="change_tab(2);"><a href="#">Prenos na drug EZŠO</a></li>
        <li id="tab3" onclick="change_tab(3);"><a href="#">Sprožitev osvežitve</a></li>
        <li id="tab4" onclick="change_tab(4);"><a href="#">Nadomeščenke</a></li>    
        <li id="tab5" onclick="change_tab(5);"><a href="#">Spremembe statusov</a></li>
        <li id="tab6" onclick="change_tab(6);"><a href="#">Sprememba zastopnika</a></li>

    </ul>
    </br>
    <div id="content_of_tab" style="margin-left:auto; margin-right:auto;">
    </div>

</div>

これは、ヘッダーとフッターのビューが表示される前に問題が発生したファイルのみです。ヘッダーで、doctypeを次のように設定しました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

私は他のファイルにたくさんのcssを持っていて、動作しているので、それに問題があるに違いありません。

私はすべてのアイデアを活用します！

編集：相違点のプリントスクリーン

http://shrani.si/f/1T/zp/1oru9l8h/diffrence.png

左はFirefoxのリスト、右はIEのリストです。

IE9をインストールしたばかりですが、スチールが機能していません。外観はIE7と同じです...

4

1 に答える 1

1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">ブラウザでQuirksモードをトリガーします。これにより、古いブラウザのバグをエミュレートするため、標準や相互に矛盾が生じます。

HTML4.01Transitionalに使用する正しいDoctypeは次のとおりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

これを配置したら、HTMLとCSSの両方が有効であることを確認してください。

document.getElementById("tab4").setAttribute("class", "selected");

setAttribute古いバージョンのInternetExplorerでは壊れています。それを避けてください。すでにjQueryを使用しているので、addClass代わりにそのメソッドを使用することをお勧めします。classNameまたは、プロパティを直接設定します。

于 2013-01-03T12:02:46.643 に答える