0

ボタンを想像するために、以前は jQuery UI を使用していました。しかし今、このコードで：

else if (ui.newTab.index() == 3) {
    $('#MediaContent').load('Content/TwainMedia.html');
    $('#MediaContent').css('background-color', '#000000');
    $('button').button();
    $("button:not(:ui-button)").button();
}

...ボタンが大きくて醜い:

ここに画像の説明を入力

HTML は次のようになります。

<div class="yearBanner">FICTION</div>
<section class="wrapper"><a class="floatLeft" 
href="https://rads.stackoverflow.com/amzn/click/com/1456405721" rel="nofollow noreferrer" target="_blank"><img height="160" 
width="107" src="http://ecx.images-amazon.com/images/I/51AxVB0JilL._SL110_.jpg" alt="The Adventures of 
Huckleberry Finn book cover"></img></a>
    <br/><cite class="nobelTitle">The Adventures of Huckleberry Finn</cite>
    <br/>
    <br/>
    <button><a href="https://rads.stackoverflow.com/amzn/click/com/0448060000" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Hardcover</a>
    </button>
    <button><a href="https://rads.stackoverflow.com/amzn/click/com/1456405721" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Paperback</a>
    </button>
    <br/>
    <br/>
    <button><a href="https://rads.stackoverflow.com/amzn/click/com/B00L4Q7OA8" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Kindle</a>
    </button>
</section>
<section class="wrapper"><a class="floatLeft" 
href="https://rads.stackoverflow.com/amzn/click/com/0486400778" rel="nofollow noreferrer" target="_blank"><img height="160" 
width="107" src="http://ecx.images-amazon.com/images/I/51qa7A+vIsL._SL110_.jpg" alt="The Adventures of 
Tom Sawyer book cover"></img></a>
    <br/><cite class="nobelTitle">The Adventures of Tom Sawyer</cite>
    <br/>
    <br/>
    <button>
        <a href="https://rads.stackoverflow.com/amzn/click/com/0486400778" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Paperback</a>
    </button>
    <br />
    <br />
    <button>
        <a href="https://rads.stackoverflow.com/amzn/click/com/B008TVDBPI" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Kindle</a>
    </button>
    <button><a href="https://rads.stackoverflow.com/amzn/click/com/B00BM7ES7G" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Audible</a>
    </button>
</section>

_SiteLayout.cshtml では、jQueryUI .js と .css を次のように参照します。

<link href="~/css/excite-bike/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.3.custom.min.js"></script>

クールな青色の小さな jQuery-UI ボタン​​を取り戻すにはどうすればよいですか?

注: 悲鳴のショットでわかるように、jQuery-UI のファン化がタブで機能しています (青い「excite-bike」テーマが必要に応じてタブに適用されています)。

アップデート

私のサイトは現在稼働中です。ただし、メディア タブのボタンは、お尻の袋よりも 9 倍醜いままです。

ここで、このサイト用にコードを共食いした以前のサイトでどのように表示されたかを確認できます (実際、サイト全体を新しいフォルダーにコピーし、変更する必要があったものを変更しただけです)。

ここに画像の説明を入力

繰り返しますが、これは前のサイトで機能し、excit-bike テーマでボタンを美しくする jQuery です。

$('ボタン').ボタン();

...そして次のようにjQueryUIを参照しています：

<link href="~/css/excite-bike/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.3.custom.min.js"></script>

...（「custom.min.css」を「custom.css」に変更）しかし、それでも機能しません。なぜでしょうか？

4

1 に答える 1