iT邦幫忙

0

【CSS】input連結目標設定

  • 分享至 

  • xImage

請問如何讓這個input的連結目標指向下方的iframe中

<style type="text/css">
.listMenu { list-style: none; padding: 0; color:red; display: flex; flex-wrap: nowrap; }
.listMenu>li { flex-grow:1; text-align:center; }
.listMenu>li input[type="radio"]{ /*display:none;*/ }
.listMenu>li input[type="radio"]:checked~label{ color:Black; cursor: default; }
.listMenu>li label{ cursor: pointer; }
.listMenu>li label:hover{ color:blue; }
</style>

<ul class="listMenu">
      <li>
        <input type="radio" name="tab" id="tab5" onclick="location.href='http://tw.yahoo.com'"/>
        <label for="tab5">Yahoo</label>
      </li>
</ul>

<iframe src="www.google.com" name="mainframe" width="100%" height="1500" scrolling="No" frameborder="0" id="mainframe"></iframe>

用了< base >還是覆蓋整頁
麻煩各位了~~~~謝謝

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
最佳解答

安奈…

<html>
<head>
    <title>Iframe Link</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- CSS -->
    <style type="text/css">
        .listMenu { list-style: none; padding: 0; color:red; display: flex; flex-wrap: nowrap; }
        .listMenu>li { flex-grow:1; text-align:center; }
        .listMenu>li input[type="radio"]{ /*display:none;*/ }
        .listMenu>li input[type="radio"]:checked~label{ color:Black; cursor: default; }
        .listMenu>li label{ cursor: pointer; }
        .listMenu>li label:hover{ color:blue; }
    </style>

    <!-- Javascript -->
    <script language="javascript">
        $( document ).ready(function() {
            $('#tab5').on( "click", function() {
                $('#mainframe').attr('src','http://api.jquery.com/on/');
            });
        });
    </script>
</head>
<body>

<ul class="listMenu">
    <li>
        <input type="radio" name="tab" id="tab5"/>
        <label for="tab5">Yahoo</label>
    </li>
</ul>

<iframe src="https://www.google.com" name="mainframe" width="100%" height="1500" scrolling="No" frameborder="0" id="mainframe"></iframe>
</body>
</html>
看更多先前的回應...收起先前的回應...
終葉 iT邦新手 5 級 ‧ 2018-08-08 15:32:24 檢舉

謝謝回答QQ
請問如果是想要把target下在

<input type="radio" name="tab" id="tab5" onclick="location.href='http://tw.yahoo.com'"/>

內的話呢

改了~
/images/emoticon/emoticon28.gif

終葉 iT邦新手 5 級 ‧ 2018-08-08 15:42:36 檢舉

謝謝><

小魚 iT邦大師 1 級 ‧ 2018-08-08 20:05:45 檢舉

話說, 那個 label for還不大知道做什麼的,
感覺沒什麼差別...

有label for, 只要選擇label的文字,就可以選到radio的選項,簡單說就是為了方便使用者選擇
http://www.w3school.com.cn/tags/att_label_for.asp

我要發表回答

立即登入回答